/* =====================================================
   染·钟楼谜团
   血染钟楼图书馆
   西欧古堡藏书馆最终版
===================================================== */


/* ===============================
        全局基础
================================ */


*{

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{


    margin:0;


    min-height:100vh;



    color:#e6d19a;



    font-family:

    "Microsoft YaHei",
    "Songti SC",
    "STSong",
    serif;



    background:


    radial-gradient(

        ellipse at center top,

        #70502d 0%,

        #3b2413 28%,

        #1b0d06 60%,

        #050302 100%

    );



    overflow-x:hidden;


}





/* ===============================
        古堡暗角
================================ */


body::before{


    content:"";


    position:fixed;


    inset:0;



    pointer-events:none;



    background:


    radial-gradient(

        ellipse at center,

        transparent 30%,

        rgba(0,0,0,.82) 100%

    );



    z-index:20;


}






/* ===============================
        顶部区域
================================ */


.library-header{


    position:relative;



    text-align:center;



    padding:


    90px 20px 70px;



    background:


    linear-gradient(

        rgba(0,0,0,.35),

        rgba(0,0,0,.9)

    );



    border-bottom:


    3px solid #a97938;



    box-shadow:


    0 25px 70px rgba(0,0,0,.95);



}







/* BY 白羊 */


.author{


    position:absolute;



    right:55px;



    top:45px;



    font-size:22px;



    letter-spacing:4px;



    color:#dfbd72;



    font-style:italic;



    text-shadow:


    0 4px 12px #000;


}






/* 顶部徽章 */


.tower{


    width:90px;


    height:90px;



    margin:


    0 auto 30px;



    display:flex;



    justify-content:center;



    align-items:center;



    border-radius:50%;



    border:


    2px solid #c0934c;



    background:


    radial-gradient(

        circle,

        #62431f,

        #100603

    );



    color:#efc979;



    font-size:42px;



    box-shadow:


    0 0 40px rgba(220,170,70,.45),


    inset 0 0 25px rgba(255,220,120,.2);



}







.library-header h1{


    margin:0 0 35px;



    font-size:58px;



    letter-spacing:18px;



    color:#efd083;



    font-weight:700;



    text-shadow:


    0 5px 15px #000,


    0 0 25px rgba(220,170,70,.25);



}







/* 隐藏英文 */


.english{


    display:none;


}







.gold-line{


    width:320px;



    height:2px;



    margin:30px auto;



    background:


    linear-gradient(

        90deg,

        transparent,

        #d0a04d,

        transparent

    );



}







.library-header h2{


    margin:0;



    font-size:34px;



    letter-spacing:10px;



    color:#e7c981;



    text-shadow:


    0 3px 10px #000;


}






.library-header p{


    display:none;


}





/* ===============================
        书架主体
================================ */


.bookshelf{


    position:relative;



    max-width:1550px;



    margin:auto;



    padding:


    90px 60px;



    display:grid;



    grid-template-columns:


    repeat(4,1fr);



    gap:


    75px 50px;



}



/* 木制书架 */


.bookshelf::before{


    content:"";


    position:absolute;



    left:30px;



    right:30px;



    top:45px;



    bottom:45px;



    background:


    linear-gradient(

        90deg,

        rgba(100,60,25,.45),

        rgba(25,12,5,.2),

        rgba(100,60,25,.45)

    );



    border-top:


    14px solid rgba(150,95,40,.3);



    border-bottom:


    14px solid rgba(150,95,40,.3);



    box-shadow:


    inset 0 0 80px #000;



    z-index:-1;


}

/* ===============================
        两侧古堡装饰
================================ */


@media(min-width:1200px){



body::after{


    content:"♜";



    position:fixed;



    left:35px;



    top:45%;



    transform:translateY(-50%);



    font-size:260px;



    color:rgba(190,145,70,.08);



    pointer-events:none;



    z-index:0;



    text-shadow:


    0 0 50px rgba(0,0,0,.8);


}






.library-header::before{


    content:"";



    position:absolute;



    left:60px;



    bottom:30px;



    width:120px;



    height:120px;



    border-left:


    2px solid rgba(210,160,80,.25);



    border-bottom:


    2px solid rgba(210,160,80,.25);



}






.library-header::after{


    content:"";



    position:absolute;



    right:60px;



    bottom:30px;



    width:120px;



    height:120px;



    border-right:


    2px solid rgba(210,160,80,.25);



    border-bottom:


    2px solid rgba(210,160,80,.25);



}



}









/* ===============================
        单本书
================================ */



.book{


    position:relative;



    perspective:1200px;



    transition:.45s;



    z-index:1;


}






.book a{


    text-decoration:none;



    color:inherit;



}






.book:hover{


    transform:


    translateY(-20px)

    rotateY(-5deg);



}







/* ===============================
        古籍封面
================================ */



.book-cover{


    position:relative;



    background:


    linear-gradient(

        145deg,

        #4d3015,

        #120704

    );



    padding:13px;



    border-radius:8px;



    border:


    3px solid #bd9148;



    box-shadow:


    0 35px 65px rgba(0,0,0,.95),


    inset 0 0 35px rgba(240,190,90,.22);



    overflow:visible;



}






/* 书脊厚度 */


.book-cover::after{


    content:"";



    position:absolute;



    top:8px;



    right:-13px;



    width:13px;



    height:calc(100% - 16px);



    background:


    linear-gradient(

        90deg,

        #553214,

        #160904

    );



    border-radius:


    0 7px 7px 0;



    box-shadow:


    8px 8px 18px rgba(0,0,0,.85);



}






/* 底部纸页厚度 */


.book-cover::before{


    content:"";



    position:absolute;



    left:12px;



    right:12px;



    bottom:-10px;



    height:10px;



    background:


    linear-gradient(

        90deg,

        #2b1709,

        #080402

    );



    box-shadow:


    0 8px 20px rgba(0,0,0,.9);



}







.book-cover img{


    width:100%;



    display:block;



    aspect-ratio:


    3 / 4;



    object-fit:cover;



    border:


    1px solid rgba(235,200,120,.55);



}







/* ===============================
        书名
================================ */



.book h3{


    margin:


    24px 0 0;



    text-align:center;



    font-size:23px;



    font-weight:500;



    letter-spacing:6px;



    color:#e8ca82;



    text-shadow:


    0 4px 12px #000;



}






/* 悬浮光 */


.book:hover .book-cover{


    box-shadow:


    0 50px 90px rgba(0,0,0,.95),


    0 0 40px rgba(220,170,70,.3),


    inset 0 0 35px rgba(255,220,120,.3);



}

/* ===============================
        页脚
================================ */


footer{


    margin-top:80px;



    padding:


    55px 20px;



    text-align:center;



    background:


    rgba(0,0,0,.35);



    border-top:


    1px solid rgba(200,150,70,.3);



    color:#b99a5e;



    letter-spacing:7px;



    line-height:2;



    box-shadow:


    0 -20px 50px rgba(0,0,0,.5);



}









/* ===============================
        大屏优化
================================ */



@media(min-width:1400px){



    .bookshelf{


        padding-left:80px;


        padding-right:80px;


    }



    .book h3{


        font-size:24px;


    }



}









/* ===============================
        平板
================================ */



@media(max-width:1200px){



    .bookshelf{


        grid-template-columns:


        repeat(3,1fr);



        padding:


        70px 35px;



    }





    .library-header h1{


        font-size:48px;



        letter-spacing:12px;



    }




    .library-header h2{


        font-size:28px;



    }



}









/* ===============================
        手机端
================================ */



@media(max-width:700px){



    .library-header{


        padding:


        65px 15px 50px;



    }





    .author{


        right:18px;



        top:20px;



        font-size:15px;



        letter-spacing:2px;



    }







    .tower{


        width:65px;



        height:65px;



        font-size:30px;



    }







    .library-header h1{


        font-size:34px;



        letter-spacing:7px;



        margin-bottom:25px;



    }







    .library-header h2{


        font-size:21px;



        letter-spacing:5px;



    }







    .gold-line{


        width:200px;



    }







    .bookshelf{


        grid-template-columns:


        repeat(2,1fr);



        padding:


        40px 18px;



        gap:


        45px 18px;



    }







    .bookshelf::before{


        left:10px;



        right:10px;



        border-width:


        8px;



    }







    .book-cover{


        padding:8px;



        border-width:


        2px;



    }







    .book-cover::after{


        right:-7px;



        width:7px;



    }







    .book h3{


        margin-top:16px;



        font-size:16px;



        letter-spacing:3px;



    }



}









/* ===============================
        超小手机
================================ */



@media(max-width:380px){



    .bookshelf{


        gap:


        35px 10px;



        padding-left:


        12px;



        padding-right:


        12px;



    }





    .book h3{


        font-size:14px;



    }





}







/* ===============================
        图片保护
================================ */



img{


    max-width:100%;



    height:auto;



}
/* ===============================
      剧本搜索框
================================ */

.search-box{

    max-width:700px;

    margin:50px auto 20px;

    padding:0 25px;

    display:flex;

    justify-content:center;

    gap:15px;

}



.search-box input{

    flex:1;

    height:55px;

    padding:0 25px;


    background:

    linear-gradient(
        145deg,
        #201306,
        #0d0803
    );


    border:

    2px solid #9d763c;


    border-radius:30px;


    color:#ead9ad;


    font-size:18px;


    letter-spacing:2px;


    outline:none;


    box-shadow:

    0 10px 30px rgba(0,0,0,.7),

    inset 0 0 15px rgba(220,170,80,.15);

}



.search-box input::placeholder{

    color:#aa9365;

}



.search-box input:focus{

    border-color:#e5c879;

    box-shadow:

    0 0 20px rgba(230,200,120,.4);

}




.search-box button{


    width:120px;


    height:55px;


    border:none;


    border-radius:30px;



    background:

    linear-gradient(
        135deg,
        #b98b42,
        #725020
    );



    color:#fff1c4;



    font-size:18px;



    letter-spacing:4px;



    cursor:pointer;



    box-shadow:

    0 10px 25px rgba(0,0,0,.7);


}



.search-box button:hover{


    transform:translateY(-3px);


    filter:brightness(1.15);


}



/* 手机适配 */

@media(max-width:700px){


.search-box{


    margin:35px auto 10px;


    padding:0 18px;


    flex-direction:column;


}



.search-box input{


    width:100%;


    height:50px;


    font-size:16px;


}



.search-box button{


    width:100%;


    height:50px;


}



}

/* =========================
   返回全部剧本
   ========================= */

.reset-search-button{

    display:none;

    margin:0 auto 30px;

    padding:10px 25px;

    border:1px solid #9b712d;

    border-radius:20px;

    background:rgba(20,12,6,.85);

    color:#d9b96c;

    font-size:14px;

    letter-spacing:2px;

    cursor:pointer;

    transition:
        .25s ease;

}


.reset-search-button.show{

    display:block;

    animation:
        resetButtonShow .35s ease;

}


.reset-search-button:hover{

    background:
        rgba(155,113,45,.25);

    color:#f1d78f;

    box-shadow:
        0 0 15px rgba(198,154,69,.25);

    transform:translateY(-2px);

}


@keyframes resetButtonShow{

    from{

        opacity:0;

        transform:translateY(-8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}