/* =========================================
1. 基礎設定
========================================= */
body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #1a252f;
    font-family: 'SetoFont', 'Nunito', 'Varela Round', 'Comic Sans MS', '微軟正黑體', 'PingFang TC', 'Heiti TC', 'Noto Sans CJK TC', sans-serif, cursive;
}

/* =========================================
2. 滿版拉伸遊戲主場景
========================================= */
.scene {
    position: relative;
    width: 100vw;
    height: 100vh; 
    background-image: url('../assets/08.png');
    background-size: 100% 100%; 
    overflow: hidden;
    z-index: 1;
}

/* =========================================
3. 左上角任務面板 (RPG 風格)
========================================= */
.quest-panel {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 280px;
    background: linear-gradient(135deg, rgba(255, 240, 245, 0.85) 0%, rgba(255, 228, 225, 0.7) 100%);
    backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 183, 197, 0.8); 
    border-radius: 8px;
    padding: 15px;
    color: #4e342e; 
    z-index: 100;
    font-family: '微軟正黑體', sans-serif; 
    box-shadow: 2px 4px 15px rgba(255, 183, 197, 0.4); 
}

.panel-header {
    display: flex;
    align-items: center;
    border-bottom: 2px dashed rgba(255, 183, 197, 0.8); 
    padding-bottom: 12px; 
    margin-bottom: 15px; 
    padding-left: 42px; 
    min-height: 36px; 
}

.header-icon {
    font-size: 1.2rem;
    margin-right: 8px;
    filter: drop-shadow(0 0 5px rgba(255, 183, 197, 0.8));
}

.header-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #d81b60; 
    letter-spacing: 1px;
}

.quest-title {
    color: #e65100; 
    font-weight: bold;
    font-size: 0.95rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.quest-icon {
    font-size: 0.8rem;
    margin-right: 5px;
}

/* 選單列表樣式 */
.quest-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quest-list li {
    padding: 8px 10px;
    margin-bottom: 5px;
    background: rgba(255, 255, 255, 0.6); 
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    color: #4e342e; 
}

.quest-list li .icon {
    margin-right: 10px;
    font-size: 1.1rem;
}

/* Hover 效果：左側亮起粉色光條，背景微微變亮 */
.quest-list li:hover {
    background: rgba(255, 183, 197, 0.4); 
    border-left: 3px solid #d81b60; 
    color: #d81b60; 
    transform: translateX(5px); 
}

/* 登出按鈕特殊樣式 */
.quest-list .logout-item {
    margin: 15px auto 0 auto; 
    background: rgba(255, 100, 100, 0.15);
    width: 100px; 
    justify-content: center; 
    border-right: 3px solid transparent; 
}

.quest-list .logout-item:hover {
    background: rgba(255, 100, 100, 0.3);
    border-left: 3px solid #d32f2f;
    border-right: 3px solid #d32f2f; 
    color: #d32f2f;
    transform: translateY(-5px); 
}

/* =========================================
4. 物件層與主角樹苗
========================================= */
.objects-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 2;
}

.sapling-container {
    position: absolute;
    left: 50%;
    top: 66%; 
    transform: translate(-50%, -100%);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: auto;
    cursor: pointer;
    transition: filter 0.3s;
}

.sapling-container:hover {
    filter: drop-shadow(0 0 15px rgba(139, 195, 74, 0.9));
}

.sapling-glow {
    position: absolute;
    bottom: 0;
    width: 140px;
    height: 35px;
    background: radial-gradient(ellipse, rgba(255, 235, 59, 0.8) 0%, rgba(139, 195, 74, 0.4) 40%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    animation: pulseGlow 2.5s infinite alternate;
    box-shadow: 0 0 20px rgba(255, 235, 59, 0.4);
}

@keyframes pulseGlow {
    from { transform: scale(0.9); opacity: 0.7; }
    to { transform: scale(1.2); opacity: 1; }
}

.sapling {
    width: 120px;
    height: 140px;
    z-index: 2;
    filter: drop-shadow(0 15px 15px rgba(0,0,0,0.3));
    animation: breathe 4s ease-in-out infinite;
    transform-origin: bottom center;
    user-select: none;
    margin-bottom: -5px;
}

@keyframes breathe {
    0%, 100% { transform: scaleY(1) rotate(0deg); }
    50% { transform: scaleY(1.03) rotate(2deg); }
}

/* 動態飛舞蝴蝶 */
.butterfly-wrapper {
    position: absolute;
    top: 70%; left: 35%;
    z-index: 4;
    animation: flutterMove 15s ease-in-out infinite;
}
.butterfly {
    width: 16px; height: 16px;
    position: relative; transform-style: preserve-3d; animation: flutterBob 3s ease-in-out infinite;
}
.wing {
    position: absolute; top: 0; width: 10px; height: 15px;
    background: #FFB74D; border-radius: 50% 50% 0 50%; transform-origin: right center; opacity: 0.9;
}
.wing.right {
    left: 10px; border-radius: 50% 50% 50% 0; transform-origin: left center; background: #FF9800; animation: flapRight 0.12s infinite alternate;
}
.wing.left { left: 0; animation: flapLeft 0.12s infinite alternate; }
@keyframes flapLeft { from { transform: rotateY(0deg); } to { transform: rotateY(70deg); } }
@keyframes flapRight { from { transform: rotateY(0deg); } to { transform: rotateY(-70deg); } }
@keyframes flutterMove {
    0% { transform: translate(0, 0) rotate(10deg); } 25% { transform: translate(60px, -60px) rotate(-10deg); }
    50% { transform: translate(120px, -20px) rotate(20deg); } 75% { transform: translate(40px, -80px) rotate(-15deg); }
    100% { transform: translate(0, 0) rotate(10deg); }
}
@keyframes flutterBob {
    0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); }
}

/* =========================================
5. 互動關卡區 (地洞與告示牌) 
========================================= */

/* 🌟 中央關卡區域 (放置地洞與告示牌) */
.center-level-zone {
    position: absolute;
    left: 50%; 
    top: 78%;  
    transform: translate(-50%, -50%);
    width: 120px;
    height: 100px;
    pointer-events: auto;
    z-index: 5; 
}

.level-zone {
    position: absolute;
    left: 68%;  
    top: 78%;   
    transform: translate(-50%, -50%);
    width: 120px;
    height: 100px;
    pointer-events: auto;
}

.signpost {
    position: absolute;
    left: 55px; 
    bottom: 9px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.2));
    transform: translateX(-50%) scale(1.0); 
    transform-origin: bottom center; 
    animation: signHover 2s ease-in-out infinite alternate, glowPulse 2s infinite alternate;
    z-index: 10;
    cursor: pointer; 
    pointer-events: auto; 
}

@keyframes signHover {
    from { transform: translateX(-50%) scale(1.0) rotate(-3deg); }
    to { transform: translateX(-50%) scale(1.0) rotate(3deg); }
}

.signpost:hover {
    animation: none;
    transform: translateX(-50%) scale(1.15);
    transition: transform 0.2s ease;
}

.signpost .board {
    background: #ffcff5; 
    border: 3px solid #4e342e;
    border-radius: 10px; 
    padding: 8px 20px;
    color: #4e342e; 
    font-weight: 900;
    font-size: 18px;
    z-index: 2;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    white-space: nowrap;
}

.signpost .pole {
    width: 12px;
    height: 35px;
    background: #8b5a2b;
    border: 2px solid #5D4037;
    border-top: none;
    z-index: 1;
    margin-top: -3px;
}

.hole {
    position: absolute;
    left: 10px;
    bottom: -5px;
    width: 90px;
    height: 28px;
    background: #1F100A;
    border-radius: 50%;
    border: 3px solid #5D4037; 
    box-shadow:
        inset 0 8px 15px rgba(0, 0, 0, 0.7),
        0 2px 0 rgba(255,255,255,0.2);
    cursor: pointer;
    transition: all 0.2s;
    z-index: 1;
}

.hole:hover {
    transform: scale(1.05);
    box-shadow:
        inset 0 8px 15px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(252, 211, 77, 0.6);
}

.magic-particle {
    position: absolute; background: white; border-radius: 50%;
    pointer-events: none; opacity: 0; animation: floatUp 2s ease-in forwards;
}
@keyframes floatUp {
    0% { transform: translateY(0) scale(0); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: translateY(-100px) scale(1.5); opacity: 0; }
}

/* =========================================
6. 右上角獨立的樹苗進度與灌溉面板
========================================= */
.tree-panel-container {
    position: absolute;
    top: 20px;
    right: 20px; 
    width: 270px;
    
    background: linear-gradient(135deg, rgba(255, 240, 245, 0.85) 0%, rgba(255, 228, 225, 0.7) 100%);
    backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 183, 197, 0.8); 
    border-radius: 8px;
    padding: 15px;
    box-shadow: 2px 4px 15px rgba(255, 183, 197, 0.4); 
    z-index: 100;
    
    text-align: center;
    font-family: '微軟正黑體', sans-serif;
}

.tree-panel-container .status-header {
    color: #d81b60;
    font-weight: 900;
    font-size: 1.1rem;
    text-shadow: 1px 1px 0 #fff;
    letter-spacing: 1px;
    
    border-bottom: 2px dashed rgba(255, 183, 197, 0.8); 
    padding-bottom: 12px; 
    margin-bottom: 12px;
    
    display: flex;               
    align-items: center;
    justify-content: center;
    min-height: 36px;            
    padding-right: 38px;         
    padding-left: 10px;          
}

.tree-panel-container .progress-text {
    font-size: 1.2rem;
    color: #4e342e;
    font-weight: bold;
    margin-bottom: 12px;
}

.progress-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
}

.progress-bg {
    position: relative;
    width: 100%;
    height: 20px; 
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid rgba(255, 183, 197, 0.5);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff9a9e, #D81B60); 
    width: 0%;
    transition: width 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.milestone-marker {
    position: absolute;
    top: 0; bottom: 0; width: 3px;
    background: rgba(255, 255, 255, 0.9);
    z-index: 5;
    box-shadow: -1px 0 2px rgba(0,0,0,0.1);
    transform: translateX(-50%);
}

.progress-labels {
    position: relative;
    width: 100%;
    height: 15px;
    margin-top: 6px;
}

.progress-labels .label {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.65rem; 
    color: #d81b60;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
    white-space: nowrap;
}

.progress-labels .label:first-child { transform: translateX(2px); }
.progress-labels .label:last-child { transform: translateX(calc(-100% - 2px)); }

.panel-fertilize-btn {
    background: linear-gradient(135deg, #ffb7c5, #ff8da1);
    border: none;
    padding: 10px 0;
    font-size: 1.1rem;
    color: white;
    border-radius: 25px;
    cursor: pointer;
    width: 100%;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.15);
    box-shadow: 0 4px 10px rgba(255, 141, 161, 0.4);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-top: 5px;
}

.panel-fertilize-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 15px rgba(255, 141, 161, 0.6);
}

.panel-fertilize-btn:active {
    transform: translateY(1px) scale(0.98);
}

/* =========================================
7. 櫻花飄落動態特效
========================================= */
.sakura-petal {
    position: absolute;
    background: linear-gradient(135deg, #ffb7c5, #ffc0cb);
    border-radius: 15px 0 15px 0; 
    pointer-events: none;
    z-index: 3;
    opacity: 0.8;
    box-shadow: 0 0 4px rgba(255, 183, 197, 0.6);
    animation: sakuraFall linear forwards;
}

@keyframes sakuraFall {
    0% { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
    10% { opacity: 0.9; }
    80% { opacity: 0.7; }
    100% { transform: translate(var(--end-x), 100vh) rotate(var(--end-rotation)); opacity: 0; }
}

/* =========================================
   🌟 穿山甲引導員與對話框
========================================= */
.pangolin-guide {
    position: absolute;
    left: 60%; 
    top: 66%;
    transform: translate(-50%, -100%); 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    pointer-events: none; 
}

.pangolin-img {
    width: 180px;
    height: 180px; 
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
    animation: breathe 3s ease-in-out infinite; 
}

.speech-bubble {
    background: #fff;
    border: 3px solid #ffb7c5;
    border-radius: 15px;
    padding: 10px 20px; 
    color: #4e342e;
    font-weight: 900;
    font-size: 14px;
    
    white-space: nowrap; 
    line-height: 1.5; 
    text-align: center;
    
    position: absolute; 
    right: 50%;
    bottom: 170px; 
    
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    animation: floatUpDn 2s ease-in-out infinite alternate;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 15%; 
    left: auto;
    transform: translateX(0);
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #ffb7c5 transparent transparent transparent;
}

.speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 15%;
    left: auto;
    transform: translateX(0);
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    z-index: 1;
}

@keyframes floatUpDn {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}

/* =========================================
   🌟 轉場遮罩專屬設定 (修復首頁排版消失問題)
========================================= */
#page-transition {
    /* 1. 讓遮罩浮動於視窗上方，絕對不會推擠到原本的首頁元素 */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9997; /* 確保它能覆蓋整個網站 (原本的 navbar 是 1000) */
    
    /* 2. 背景圖片設定 */
    background-image: url('../assets/10.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 3. 核心修復：預設為透明隱藏，且不阻擋滑鼠點擊 */
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.4s ease; /* 柔和的淡入淡出效果 */
}

/* 🌟 當 JavaScript 觸發轉場時，才顯示這個遮罩 */
#page-transition.transition-active {
    opacity: 1;
    pointer-events: auto; /* 轉場期間阻擋點擊，防止使用者亂按 */
}

/* =========================================
   🌟 轉場角色容器設定 (恢復橫向跑法，草地位置)
========================================= */
/* 🌟 設定角色容器的大小與初始位置 */
#dog-container {
    position: absolute;
    /* 🌟 將角色放置在畫面高度約 68% 的位置，讓他剛好踩在下方的草地上 */
    top: 68%;              
    /* 核心修改：角色水平翻轉，讓他面向右邊跑 */
    transform: translateY(-50%) scaleX(-1); 
    /* 初始位置：畫面左側外面 */
    left: -300px;          
    width: 250px;          
    height: 250px;
    z-index: 9999;
    opacity: 1;            /* 恢復直接顯示 */
    pointer-events: none;
}

/* 🌟 當 JS 觸發轉場時，執行橫向跑步動畫 */
.run-dog {
    /* 3 秒內完成跑步，線性移動 */
    animation: runRight 3s linear forwards; 
}

/* 🌟 從左側移動到右側的簡單位移 */
@keyframes runRight {
    0% {
        left: -300px;
    }
    100% {
        left: 100vw; /* 跑到右側畫面外 */
    }
}

/* =========================================
   🌟 轉場進度條樣式 (藤蔓風格版 - 精簡文字)
========================================= */
.custom-loader {
    position: absolute;
    bottom: 5%; 
    left: 50%; 
    transform: translateX(-50%);
    width: 85%; 
    max-width: 650px; 
    text-align: center;
    z-index: 9998; 
}

/* 🌟 進度條上方的文字排版 */
.loader-text-top {
    display: flex;
    /* 🌟 核心修改：將原本的 space-between 改為 center，讓剩下的文字置中 */
    justify-content: center; 
    color: #4e342e; /* 深咖啡色文字 */
    font-weight: 900;
    font-size: 1.1rem;
    margin-bottom: 8px;
    padding: 0 10px;
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

/* 🌟 藤蔓風格的外框 */
.custom-loader .transition-progress-wrapper.vine-style {
    position: relative;
    width: 100%;
    height: 24px;
    background-color: rgba(255, 228, 225, 0.9); 
    border: 4px solid #6d4c41; /* 樹幹般的深色邊框 */
    border-radius: 15px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 🌟 漸層進度條本體 */
.custom-loader .transition-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff748c, #d81b60); 
    width: 0%;
    border-radius: 10px; 
}

/* 🌟 當觸發轉場時，進度條在 1.5 秒內填滿 (配合剛剛改慢的狗狗跑動時間) */
.transition-active .transition-progress-fill {
    animation: fillProgress 3s linear forwards;
}

@keyframes fillProgress {
    0% { width: 0%; }
    100% { width: 100%; }
}

#watering-can-container {
    margin-left: 20px; 
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

/* =========================================
   8. 面板摺疊功能 (🌟 左右完美對稱圓形外框設計)
========================================= */

/* --- 🌟 左側面板與按鈕 --- */
.quest-panel {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.quest-panel.collapsed {
    transform: translateX(calc(-100% - 20px));
}

/* 展開時：圓形內嵌在左上角 */
.left-toggle-btn {
    position: absolute;
    left: 15px; 
    top: 15px; /* 🌟 確保垂直置中，與容器內距齊平 */
    width: 34px; 
    height: 34px;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid rgba(255, 183, 197, 0.8);
    border-radius: 50%; 
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #d81b60;
    font-weight: bold;
    font-size: 1.1rem;
    z-index: 101;
    box-shadow: 0 2px 5px rgba(255, 183, 197, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.left-toggle-btn:hover {
    background: #ffb7c5;
    color: white;
    transform: scale(1.1); 
}

/* 摺疊時：滑到面板右側凸出 */
.quest-panel.collapsed .left-toggle-btn {
    left: calc(100% + 12px); 
    top: 15px;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, rgba(255, 240, 245, 0.95), rgba(255, 228, 225, 0.9));
    border: 2px solid rgba(255, 183, 197, 0.8); 
    border-radius: 50%; 
    box-shadow: 4px 4px 10px rgba(255, 183, 197, 0.3);
}

/* --- 🌟 右側面板與按鈕 --- */
.tree-panel-container {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tree-panel-container.collapsed {
    transform: translateX(calc(100% + 20px));
}

/* 展開時：圓形內嵌在右上角 */
.right-toggle-btn {
    position: absolute;
    right: 15px; 
    top: 15px; /* 🌟 確保垂直置中，與容器內距齊平 */
    width: 34px; 
    height: 34px;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid rgba(255, 183, 197, 0.8);
    border-radius: 50%; 
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #d81b60;
    font-weight: bold;
    font-size: 1.1rem;
    z-index: 101;
    box-shadow: 0 2px 5px rgba(255, 183, 197, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.right-toggle-btn:hover {
    background: #ffb7c5;
    color: white;
    transform: scale(1.1);
}

/* 摺疊時：滑到面板左側凸出 */
.tree-panel-container.collapsed .right-toggle-btn {
    right: calc(100% + 12px); 
    top: 15px;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, rgba(255, 240, 245, 0.95), rgba(255, 228, 225, 0.9));
    border: 2px solid rgba(255, 183, 197, 0.8); 
    border-radius: 50%; 
    box-shadow: -4px 4px 10px rgba(255, 183, 197, 0.3);
}