/* --- 1. 基礎環境重設 --- */
* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden; background-color: #000;
}

.immersive-bg {
    width: 100vw; height: 100vh;
    background-image: url('../img/bg.png');
    background-size: cover; background-position: center;
    position: relative; /* 讓整個畫面成為絕對定位的基準點 */
}

/* --- 2. 角色區塊 (在底層，佔滿高度) --- */
.character-section {
    position: absolute;
    right: 5%;         /* 電腦版偏右 */
    bottom: 0;         /* 腳部貼齊螢幕底端 */
    width: 45vw;       /* 佔畫面比例大 */
    height: 100vh;     /* 關鍵：佔滿整個視窗高度，絕不產生硬切線 */
    z-index: 1;        /* 在對話框後面 */
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.character-section img {
    width: 100%;
    height: 90%;       /* 留出頭部空間 */
    /* cover 配合 top center 會鎖定頭部，並自動隱藏超出畫面的腿部 */
    object-fit: cover; 
    object-position: top center; 
    filter: drop-shadow(10px 5px 20px rgba(0,0,0,0.4));
}

/* --- 3. 對話 UI 區塊 (在上層，疊在角色前) --- */
.ui-section {
    position: absolute;
    left: 8%;          /* 電腦版偏左 */
    bottom: 50%;       /* 垂直位置浮在左下角 */
    width: 450px;      /* 對話框固定寬度 */
    z-index: 10;       /* 在角色前面 */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dialog-bubble {
    background: rgba(10, 25, 47, 0.95);
    border: 2px solid #d4af37;
    padding: 1.2rem;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.dialog-bubble::after {
    content: ''; position: absolute; right: -14px; top: 30%;
    border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 14px solid #d4af37;
}

#dialog-text { margin: 0; color: #e0e0e0; font-size: 0.9rem; line-height: 1.6; }
.player-options { display: flex; flex-direction: column; gap: 8px; }
.player-options button {
    background: rgba(0, 0, 0, 0.7); color: #d4af37; border: 1px solid rgba(212, 175, 55, 0.4);
    padding: 10px 16px; border-radius: 8px; cursor: pointer; text-align: left; font-size: 0.85rem; transition: 0.2s;
}
.player-options button:hover { background: #d4af37; color: #0a192f; transform: translateX(8px); }

/* --- 📱 4. 手機版 RWD：滿版角色 + 底部漸層 UI --- */
@media (max-width: 768px) {
    .character-section {
        right: 0;
        width: 100vw;
        height: 100vh; /* 關鍵：手機版也要滿高，讓角色延展到底部 */
    }
    
    .character-section img {
        height: 85%; /* 手機版略微縮小，避免過度擁擠 */
    }

    .ui-section {
        left: 0;
        bottom: 0; /* 死死釘在畫面最底部 */
        width: 100vw;
        /* 關鍵：用黑色漸層向上暈染，自然遮住角色的腿部，完美取代硬切線 */
        background: linear-gradient(to top, rgba(0,0,0,0.95) 30%, rgba(0,0,0,0.8) 70%, transparent 100%);
        padding: 40px 20px 20px 20px; 
    }

    .dialog-bubble { max-width: 100%; border-radius: 8px; }
    .dialog-bubble::after { display: none; } /* 手機版隱藏尾巴 */
    
    #dialog-text { font-size: 14px; }
    .player-options button { font-size: 13px; padding: 8px 12px; }
}
/* 沉浸式邊緣修復：多重陰影遮蓋 */
.fix-white-edge {
    /* 原理：
       1-4 層：往四個對角線方向各推 1px 的實色陰影，強制壓住白邊。
       第 5 層：加上一層微弱的環境擴散陰影，讓角色融入背景氣氛。
    */
    filter: 
        drop-shadow(1px 1px 0px rgba(45, 27, 13, 0.9))   /* 右下：深褐色環境色 */
        drop-shadow(-1px -1px 0px rgba(45, 27, 13, 0.9)) /* 左上 */
        drop-shadow(1px -1px 0px rgba(45, 27, 13, 0.9))  /* 右上 */
        drop-shadow(-1px 1px 0px rgba(45, 27, 13, 0.9))  /* 左下 */
        drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));         /* 柔和整體的環境光 */
    
    /* 確保立繪渲染品質 */
    image-rendering: -webkit-optimize-contrast;
}