/* 基礎樣式設定 */
body {
    margin: 0;
    background-color: #574535;
    color: #ffffff;
    font-family: 'serif', "Microsoft JhengHei", "Apple LiSung";
    overflow-x: hidden;
}

/* --- 第一幕：入口 Banner --- */
.banner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
    pointer-events: none; /* 初始鎖定點擊 */
    transition: opacity 0.6s ease;
}

.banner .content .title { 
    font-size: 6em; 
    text-align: center; 
    text-shadow: 0 0 30px rgba(0,0,0,0.7);
    font-weight: bold;   
}

#enter-hint {
    text-align: center;
    opacity: 0; /* 初始隱藏 */
    transition: opacity 1s ease;
    margin-top: 20px;
    letter-spacing: 5px;
}

.banner ::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('images/bg2.png');
    background-size: cover;
    background-position: center;
    z-index: -1;
    mask-image: url('images/ink.gif');
    mask-size: cover;
    mask-position: center;
    mask-repeat: no-repeat;

}

/* --- 第二幕：公會布告欄容器 --- */
.board-container {
    display: none; 
    opacity: 0;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 60px 20px;
    /* 背景使用深色木質感 */
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url('images/2.png');
    transition: opacity 1s ease;
}

.board-title {
    font-size: 2.5em;
    color: #d4a373;
    margin-bottom: 50px;
    text-shadow: 2px 2px 5px #000;
}

.quest-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    max-width: 1100px;
    width: 100%;
}

/* --- 貼紙按鈕 (任務紙張) 核心視覺 --- */
.quest-paper {
    text-decoration: none;
    color: #4a3423;
    background-color: #c2b280; 
    background-image: url('https://www.transparenttextures.com/patterns/handmade-paper.png');
    padding: 25px 20px;
    box-shadow: 8px 8px 15px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #a68d60;
    position: relative;
    transform-origin: top center; /* 模擬釘在木板上的物理支點 */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* 預設懷舊、發黃濾鏡 */
    filter: sepia(0.8) contrast(0.9) brightness(0.9);
}

/* 裝飾性圖釘 */
.quest-paper::before {
    content: '';
    position: absolute;
    top: 8px;
    width: 12px; height: 12px;
    background: radial-gradient(circle, #aa8866, #443322);
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    z-index: 5;
}

/* 進階繪畫感圖片設定 */
.quest-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    margin-bottom: 15px;
    mix-blend-mode: multiply; /* 讓圖片透出羊皮紙紋理 */
    filter: grayscale(0.3);
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent);
    mask-image: linear-gradient(to bottom, black 85%, transparent);
}

/* --- 互動動態 --- */
.quest-paper:hover {
    transform: scale(1.05) translateY(-5px) rotate(0deg) !important;
    filter: sepia(0) contrast(1.1) brightness(1); /* 恢復原本色彩 */
    background-color: #fdf5e6;
    box-shadow: 20px 20px 35px rgba(0,0,0,0.7);
    z-index: 10;
}

.quest-paper:hover .quest-img {
    mix-blend-mode: normal;
    filter: grayscale(0);
}

/* 標題手繪劃線動畫 */
.quest-content h3 {
    margin: 5px 0;
    position: relative;
}
.quest-content h3::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background-color: #4a3423;
    transition: width 0.4s ease;
}
.quest-paper:hover h3::after { width: 100%; }

/* 點擊壓印感 */
.quest-paper:active {
    transform: scale(0.98) translateY(2px) !important;
}

/* 藝術性隨機擺放 (傾斜角度) */
.p1 { transform: rotate(-3deg); }
.p2 { transform: rotate(4deg) translateY(20px); }
.p3 { transform: rotate(-2.5deg) translateY(-10px); }
.p4 { transform: rotate(5deg); }
.p5 { transform: rotate(-4deg) translateY(15px); }
/* 新增 p6 的隨機擺放感 */
.p6 { 
transform: rotate(3deg) translateY(5px);
background-color: #fff9f0;} /* 比羊皮紙更白一點 */ 


/* 為了讓 6 個項目排版更美觀，建議微調 Grid 設定 */
.quest-board {
    display: grid;
    /* 調整 minmax，讓寬度足夠時能排成 3 欄，寬度縮小時自動換行 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 40px;
    max-width: 1200px; /* 稍微放寬一點點 */
    width: 100%;
}

.p6 .quest-img {
    border: 5px solid #fff; /* 模擬相片白邊 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    mask-image: none; /* 移除原本的底部漸層遮罩，讓照片顯示完整 */
    -webkit-mask-image: none;
    mix-blend-mode: normal; /* 不使用 multiply，讓照片色彩清晰 */
}

/* --- 手機版與平板 RWD 最佳化 (螢幕寬度 768px 以下) --- */
@media screen and (max-width: 768px) {
    /* 第一幕：防止大標題爆字折行 */
    .banner .content .title { 
        font-size: 3.5em; /* 縮小字體 */
        padding: 0 15px;
    }
    
    #enter-hint {
        font-size: 0.9em;
        letter-spacing: 3px;
    }

    /* 第二幕：調整布告欄間距 */
    .board-container {
        padding: 40px 15px; /* 縮小內襯，留更多空間給卡片 */
    }

    .board-title {
        font-size: 1.8em;
        margin-bottom: 30px;
    }

    /* 任務卡片排版調整 */
    .quest-board {
        /* 手機端改為穩定單欄或雙欄，並縮小間距防止畫面太散 */
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 25px; 
        padding: 0 10px;
        box-sizing: border-box;
    }

    /* 修正手機端的隨機傾斜度（降低角度與位移，防止超出螢幕或疊字） */
    .p1 { transform: rotate(-1.5deg); }
    .p2 { transform: rotate(1.5deg) translateY(5px); }
    .p3 { transform: rotate(-1deg) translateY(0); }
    .p4 { transform: rotate(2deg); }
    .p5 { transform: rotate(-1.5deg) translateY(5px); }
    .p6 { transform: rotate(1deg) translateY(0); }

    /* 任務紙張本體 */
    .quest-paper {
        padding: 20px 15px; /* 稍微縮小內距 */
        box-shadow: 4px 4px 10px rgba(0,0,0,0.4); /* 陰影縮小才不會在手機上顯得髒 */
    }

    /* 任務圖片高度優化 */
    .quest-img {
        height: 160px; /* 手機上稍微拉高一點，視覺比例比較好 */
    }

    /* 針對觸控裝置（手機）調整 Hover 效果 */
    /* 因為手機沒有滑鼠，hover 通常靠手指「點擊」觸發，過大的位移會讓使用者誤點 */
    .quest-paper:hover {
        transform: scale(1.02) translateY(-2px) rotate(0deg) !important;
        box-shadow: 8px 8px 15px rgba(0,0,0,0.5);
    }
}

/* --- 針對極小螢幕 (如 iPhone SE, 寬度 375px 以下) 的極致微調 --- */
@media screen and (max-width: 375px) {
    .banner .content .title { 
        font-size: 2.8em; 
    }
    .quest-board {
        grid-template-columns: 1fr; /* 強制單欄排列 */
    }
    /* 在極小螢幕完全取消傾斜，確保文字最好閱讀、絕對不破版 */
    .p1, .p2, .p3, .p4, .p5, .p6 { 
        transform: rotate(0deg) translateY(0) !important; 
    }
}