/* --- 頁面與佈局 --- */
body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #333; display: flex; justify-content: center; align-items: center; height: 100vh; }
#page-container { display: flex; gap: 20px; align-items: flex-start; }
#game-container, #city-container { width: 500px; height: 800px; background-color: #f0f0f0; border: 5px solid #111; position: relative; overflow: hidden; display: flex; flex-direction: column; }

/* --- 遊戲面板 --- */
#game-area { width: 100%; flex-grow: 1; position: relative; background-image: url('pict/background.jpg'); background-size: cover; background-position: center; }
#game-ui { position: absolute; top: 10px; left: 10px; z-index: 50; background: rgba(0, 0, 0, 0.5); padding: 5px 15px; border-radius: 10px; color: white; }
#gold-display { font-size: 20px; font-weight: bold; color: #ffd700; }
#game-over-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); color: white; display: none; flex-direction: column; justify-content: center; align-items: center; z-index: 100; }
#game-over-screen h1 { font-size: 48px; margin-bottom: 20px; }
#restart-button { padding: 15px 30px; font-size: 20px; cursor: pointer; border: none; border-radius: 10px; background-color: #4CAF50; color: white; }
#game-info { width: 100%; height: 80px; background-color: #2c2c2c; color: #f0f0f0; border-top: 3px solid #111; padding: 8px 15px; box-sizing: border-box; position: relative; overflow: hidden; }
#log-container { position: absolute; bottom: 8px; left: 15px; right: 15px; }
#tower-controls { width: 100%; height: 120px; background-color: #5d4037; display: flex; justify-content: space-around; align-items: center; border-top: 3px solid #111; }
.tower-slot { width: 100px; height: 100px; border: 3px dashed #fff; border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.2); transition: background-color 0.3s; }
.tower-slot:hover { background-color: rgba(255, 255, 255, 0.4); }
.tower-slot p { margin: 0; color: white; font-size: 16px; font-weight: bold; pointer-events: none; }
.tower-slot .cost { font-size: 14px; font-weight: bold; color: #ffd700; margin-top: 8px; pointer-events: none; }

/* --- 遊戲物件 --- */
.monster { position: absolute; width: 50px; height: 50px; background-size: contain; background-repeat: no-repeat; background-position: center; user-select: none; }
.tower { position: absolute; width: 75px; height: 75px; background-size: contain; background-repeat: no-repeat; background-position: center; user-select: none; cursor: pointer; transition: box-shadow 0.2s; }
.projectile { position: absolute; width: 8px; height: 8px; background-color: #ffeb3b; border-radius: 50%; box-shadow: 0 0 5px #ffeb3b, 0 0 10px #ffeb3b; z-index: 10; }
.tower.selected { box-shadow: 0 0 15px 5px #00ffff; border-radius: 50%; }
.hidden { display: none; }
.log-message { margin: 1px 0; font-size: 14px; width: 100%; text-align: left; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.5s; }
.log-message:nth-last-child(1) { opacity: 1; color: #ffffff; }
.log-message:nth-last-child(2) { opacity: 0.8; }
.log-message:nth-last-child(3) { opacity: 0.6; }
.log-message:nth-last-child(4) { opacity: 0.4; }
.damage-text { position: absolute; font-size: 18px; font-weight: bold; color: #ff4747; text-shadow: 1px 1px 2px black; user-select: none; pointer-events: none; z-index: 20; animation: damage-animation 1s ease-out forwards; }
@keyframes damage-animation { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-40px); opacity: 0; } }

/* --- 升級與轉職菜單 --- */
#tower-menu { position: absolute; z-index: 60; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.upgrade-btn, .job-change-btn { padding: 8px 16px; font-size: 16px; font-weight: bold; color: white; border: 2px solid white; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 8px rgba(0,0,0,0.3); width: 150px; }
.upgrade-btn { background-color: #4CAF50; }
.upgrade-btn:hover { background-color: #45a049; }
.job-change-btn.fire { background-color: #c0392b; }
.job-change-btn.fire:hover { background-color: #e74c3c; }
.job-change-btn.ice { background-color: #2980b9; }
.job-change-btn.ice:hover { background-color: #3498db; }

/* --- 城市面板 --- */
#city-container { background-color: #e8e8e8; }
#city-image-wrapper {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* 修改：改為垂直排列 */
    justify-content: center;
    align-items: center;
    background-color: #cdd2d5;
    padding: 20px;
    box-sizing: border-box;
    gap: 15px; /* 新增：在戰力與圖片之間增加間距 */
}
#city-image {
    /* 修改：限制最大尺寸為 280x500 */
    max-width: 280px;
    max-height: 500px;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}#city-controls { width: 100%; height: 180px; background-color: #3e3e3e; border-top: 5px solid #111; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 10px; box-sizing: border-box; }
.city-upgrade-btn { width: 80%; padding: 12px; font-size: 18px; font-weight: bold; border-radius: 8px; border: 2px solid #ccc; background-color: #666; color: #ccc; cursor: not-allowed; }



/* --- 在 style.css 末尾新增 --- */

/* 城市升級按鈕被購買後的禁用樣式 */
.city-upgrade-btn.disabled {
    background-color: #333; /* 變暗 */
    color: #888;
    border-color: #555;
    cursor: not-allowed; /* 滑鼠變成禁止符號 */
}

/* --- 在 CSS 末尾新增這個樣式 --- */
#combat-power-display {
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    box-sizing: border-box;
}
#combat-power-value {
    color: #e74c3c; /* 讓戰力數字更醒目 */
}


/* 魔王專用樣式 */
.monster.boss {
    width: 100px;
    height: 100px;
    /* 加上紅色外光暈，看起來更危險 */
    filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.8));
    z-index: 15; /* 確保在一般怪物之上 */
}

/* --- 在 style.css 末尾新增 --- */

#enemy-strength-display {
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #4a4a4a;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    box-sizing: border-box;
}

#enemy-strength-value {
    color: #9b59b6; /* 紫色，代表敵人的威脅 */
    font-size: 20px;
}


/* --- 在 style.css 末尾新增 --- */

/* 血條外框 */
.health-bar-container {
    position: absolute;
    top: -10px; /* 定位在怪物圖片的上方 10px */
    left: 50%;
    transform: translateX(-50%); /* 水平置中 */
    width: 40px;
    height: 5px;
    background-color: #333; /* 血條底色 */
    border: 1px solid #000;
    border-radius: 2px;
    z-index: 10;
}

/* 顯示實際血量的內條 */
.health-bar-fill {
    width: 100%; /* 初始為 100% */
    height: 100%;
    background-color: #28a745; /* 健康的綠色 */
    border-radius: 1px;
    /* 讓寬度和顏色變化時有平滑的過渡動畫 */
    transition: width 0.2s linear, background-color 0.5s ease;
}