@font-face {
    font-family: "ipix";
    src: url("/hobby/assets/fonts/ipix.ttf");
}
html, body{
    padding: 0;
    margin: 0;
    background-color: rgb(149, 155, 147);
    font-family: "ipix", Georgia, "Times New Roman", Times, sans-serif;
}

#back{
    position: fixed;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px;
    margin:0;
    top:0;

    border-radius: 0 0 15px 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#back a{
    color: #5d6656;
    text-decoration: none;
}
#back a:hover{
    color: #3d352d;
}
main{
    padding: 1em;
    display: flex;
    align-items: flex-start;/*!*/
    max-width:100%;
}

#l{
    flex: 1;
    display: flex;
    flex-direction: column;
    position:sticky;
    top:0;
    align-self: flex-start;
}
#r{
    flex:1.35;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding:10px;
}
#screen{
    padding:5px 10px 10px 5px;
    max-height: 100%;
    position: relative;
}
#screen img{
    max-width:100%;
    -webkit-box-shadow: 5px 5px 0px 0px #3d352d; 
box-shadow: 5px 5px 0px 0px #3d352d;

transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(1);
}
#screen::after {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(0.75px) grayscale(0.3); 
    transition: backdrop-filter 0.8s ease;
    pointer-events: none;
    z-index: 1;
}

#screen:hover::after {
    backdrop-filter: blur(0px) grayscale(0); 
}

#screen p{
    position: absolute;
    bottom: 0;
    z-index: 2;
    color:#333;
    font-style: italic;
}
#collection{
    padding:25px 15px 0px 25px;
    position: relative;
}
#collection h1{
    position: absolute;
    top:0;
    z-index:11;
}
.game-covers{
    font-size: 0;
    padding: 10px 0px 0px 35px;
  text-align: left;

  
}
.game-covers img {
    display: inline-block;
    position: relative;
    z-index: 1;
    width:25%;
    margin: 15px 10px 0px 10px;
    transform: perspective(500px) rotateY(-22deg) translateZ(20px)
    ;
    transition:all 0.2s ease;

    z-index: var(--order);
  }
.game-covers img:hover {
    transform: perspective(500px) rotateY(0deg) translateZ(20px);
    box-shadow: none;
    z-index: 999;
  }
img.near-left{
    margin-left: -30px;
}
img.near-right{
    margin-right:0;
}
img.ds{
    width: 30%;
}

/* shelf */
.shelf-layer {
    position: relative;
    margin-bottom: 0;
}
.shelf-layer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 8px;
    
    z-index: 0;
}

.shelf-plank {
    position: relative;
    padding-bottom: 35px; 
}

.shelf-layer::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    
    background-image: url("/hobby/assets/games/plank.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    
    pointer-events:none;
    z-index: -1;

}


.game-covers img {
    filter: drop-shadow(0 10px 5px rgba(0,0,0,0.3)); 
}

#log{
    min-height: 80%; /* ! */

    padding-left:4em;
    padding-right: 4em;

    height: 70vh;
    overflow-y: auto;
    background-image: url("/hobby/assets/games/b3.gif");
   

    grid-area: 2 / 2;
    padding: 20px;
}

.lace-frame {
    display: grid;

    grid-template-columns: 10px 1fr 10px;

    grid-template-rows: 10px 1fr 10px;
    position: relative;

    border-radius: 8px; 
    filter: drop-shadow(0 4px 10px rgba(104,82,56,0.05));

    margin-bottom: 20px;
}

.lace-frame::before, 
.lace-frame::after,
.lace-edge-u, .lace-edge-s, .lace-edge-h, .lace-edge-m {
    content: "";
    background-color: transparent;
}


/* 左上kadui1 */
.lace-frame::before { grid-area: 1 / 1, 3 / 1; background: url("data:image/gif;base64,R0lGODlhCgAKAIAAAJqamv///yH5BAAAAAAALAAAAAAKAAoAAAITTIB2cMrcVExRQmkxvlsb3oFGAQA7") no-repeat; } 
/* 右上kadu2 */
.lace-frame::after { grid-area: 1 / 3; background: url("data:image/gif;base64,R0lGODlhCgAKAIAAAJqamv///yH5BAAAAAAALAAAAAAKAAoAAAITBIJ2GLcNI3szsWtx1pTr21lAAQA7") no-repeat; }  
/* 左下kadu3*/
.lace-corner-bl { 
    grid-area: 3 / 1; 
    background: url("data:image/gif;base64,R0lGODlhCgAKAIAAAJqamv///yH5BAAAAAAALAAAAAAKAAoAAAISRBypqH3uWIRJzndXxU+CvwAFADs=") no-repeat; 
}
/* 右下kadu4 */
.lace-corner-br { 
    grid-area: 3 / 3; 
    background: url("data:image/gif;base64,R0lGODlhCgAKAIAAAJqamv///yH5BAAAAAAALAAAAAAKAAoAAAISjB+QyMrmXnyLQgndrCp2DzgFADs=") no-repeat; 
}

/* 顶边kaddu_u */
.lace-edge-u { grid-area: 1 / 2; background: url("data:image/gif;base64,R0lGODlhDAAKAJECAJqamv///////wAAACH5BAEAAAIALAAAAAAMAAoAAAIThA55kmEQ4ouyOoqz1bz7D4ZcAQA7") repeat-x; }
/* 底边kadu_s */
.lace-edge-s { grid-area: 3 / 2; background: url("data:image/gif;base64,R0lGODlhDAAKAJECAJqamv///////wAAACH5BAEAAAIALAAAAAAMAAoAAAIUjI+py+0PEzAz1EoFBjoLDXBfWAAAOw==") repeat-x; }
/* 左边kadu_h */
.lace-edge-h { grid-area: 2 / 1; background: url("data:image/gif;base64,R0lGODlhCgAMAJECAJqamv///////wAAACH5BAEAAAIALAAAAAAKAAwAAAIWRI4olrp9Hgxsmppwk1Dw9GXTwWhBAQA7") repeat-y; }
/* 右边kadu_m */
.lace-edge-m { grid-area: 2 / 3; background: url("data:image/gif;base64,R0lGODlhCgAMAJECAJqamv///////wAAACH5BAEAAAIALAAAAAAKAAwAAAIVjH+ACLLW3AttwqmU1a92IX0W1UEFADs=") repeat-y; }


#log h1 {
    text-align: center;
    color: #212528;
    font-size: 2rem;
}

#log-list{
    font-size: 1.3rem;
    color: #5d544a;

    padding: 5px;
}
#log-list img{
    height: 201px;
    width:124px;
}
#log-list table {
    font-size: 1.6rem;
    line-height: 1.3em;
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    overflow: hidden; 
    
}
#log-list th {
    background-color: #ecf8e595; 
    color: #5d6656;
    font-weight: bold;
    padding: 10px;
}
#log-list td {
    background-color: #fffdfa80;
    border-bottom: 1px solid #d4dccf;
    padding: 12px;
}
#log-list td:first-child {
    border-bottom: 1px solid #e5f8d0;
    padding: 10px;
    text-align: center;
}
#log-list mark {
    background-color: #fcf1d4; 
    color: #8c6d1f;
}



#diary{
    flex: 1;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:35px;
    row-gap: 25px;

   
}
.post{
    background-color:rgb(255, 255, 237);
    -webkit-box-shadow: 10px 10px 0px 5px #3d352d; 
box-shadow: 10px 10px 0px 5px #3d352d;

    height: 15rem;
    background-image: url("/hobby/assets/games/b.gif");
    filter: grayscale(0.3);

    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);

    padding: 5px;
    overflow: hidden;
}
.post::before {
    content: "";
    position: absolute;
    inset: 0;

    opacity: 0;
    transform: scale(0.95);
    transition: all 0.4s ease;
    z-index: -1;
    filter: sepia(1) saturate(0.5);
}
.post:hover{
    transform: translateY(-8px);
    filter: grayscale(0);
}
.post:hover::after {
    opacity: 0.3;
    transform: scale(1.08);
}

.post a{
    text-decoration: none;
    font-size: 2em;
    color: #3d352d;
}
.post a:hover{
    color:#817b75;
}
.post-content {
    max-height: 100%;
}
#readmore{
    font-size: 0.7em;
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px); 
    z-index: 1000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-content {

    background-image: url("/hobby/assets/games/b5-126.gif");
    width: 80%;
    max-width: 1000px;
    max-height: 90vh;
    padding: 40px;
    position: relative;
    display: flex;
    
    overflow-y: auto;
    color: #d1c7bc; 
    line-height: 1.8;

    border: 1px solid #3d352d;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    
    padding:0 70px 0 70px;
}

#modal-body{
    flex:1;
    background-color: #1a1612; 
    padding: 2rem;
    height: fit-content;
}
#modal-body::after {
    content: "EOF";
    display: block;
    width: 100%;
    height: 60px;
    margin-top: 20px; 
    
    background-image: url("/hobby/assets/games/line-owl.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; 
}

.modal-close {
    position: absolute;
    top: 15px; right: 20px;
    font-size: 24px;
    cursor: pointer;
    color: #817b75;
    transition: color 0.2s;
    z-index: 1;
}
.modal-close:hover { color: #fff; }

.modal-content::-webkit-scrollbar { width: 4px; }
.modal-content::-webkit-scrollbar-thumb { background: #333; }

.meta-item>.value{
    white-space: pre-line;
}

@media screen and (max-width: 768px) {
    main{
        flex-direction: column;
    }
    #l{
        position: static;
    }

    #diary{
        display: flex;
        flex-direction: column;
        background-image: url("../games/b.gif' |url}}");
    }
    .post{
        background: transparent;
        box-shadow: none;
        height:fit-content;
        border-bottom: #5d544a dashed 1px;
        padding:10px;
    }
    .post-content{
        display: none;
    }

    .modal-content {
        height: 90vh; 
        display: block; 
        overflow-y: auto; 
        background-color: #2d2620; 
        height: fit-content;
    }

    #modal-body {
        width: fit-content;
        min-height: 50px; 

        display: block; 
        clear: both;
    }
}