/* =========================================
   1. 規則提示框
   ========================================= */
.rule-alert {
    background: rgba(255, 152, 0, 0.1);
    border-left: 4px solid #ff9800;
    padding: 15px;
    border-radius: 6px;
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.rule-alert .alert-icon {
    font-size: 1.8rem;
    color: #ff9800;
    margin-top: 5px;
}

.rule-alert h4 { margin: 0 0 10px 0; color: #ffb74d; font-size: 1.1rem; }

.rule-list { list-style: none; padding: 0; margin: 0; }
.rule-list li { margin-bottom: 8px; color: #ddd; font-size: 0.95rem; }
.rule-list i { margin-right: 8px; width: 15px; text-align: center; }

/* =========================================
   2. 地圖 NPC 卡片
   ========================================= */
.map-card {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    gap: 25px;
    align-items: center;
    margin-bottom: 30px;
}

.npc-img img {
    max-width: 150px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.npc-info h4 { margin: 0 0 10px 0; color: #fff; font-size: 1.2rem; border-bottom: 1px dashed rgba(255,255,255,0.1); padding-bottom: 5px; }
.npc-info p { color: #ccc; line-height: 1.6; margin-bottom: 15px; }

.target-box {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-left: 3px solid #f44336; /* 紅色代表敵對 */
}

.target-box i { font-size: 1.5rem; color: #ef5350; }
.target-box strong { display: block; color: #ffcdd2; margin-bottom: 3px; }
.target-box .sub-text { font-size: 0.85rem; color: #aaa; }

/* =========================================
   3. 吸魂能量條 (Soul Bars)
   ========================================= */
.soul-tier-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.soul-card {
    background: rgba(0, 0, 0, 0.2);
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.soul-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.weapon-name { font-weight: bold; font-size: 1rem; }
.soul-val { color: #81c784; font-family: monospace; font-weight: bold; font-size: 1.1rem; }

/* 進度條軌道 */
.progress-track {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
}

/* 進度條本體 */
.progress-bar {
    height: 100%;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    position: relative;
    transition: width 1s ease-out; /* 動畫效果 */
}

/* 條紋動畫效果 */
.progress-bar::after {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 1rem 1rem;
}

/* 階級顏色 */
.tier-1 { color: #90a4ae; } .tier-1-bg { background: #90a4ae; }
.tier-2 { color: #66bb6a; } .tier-2-bg { background: #66bb6a; }
.tier-3 { color: #42a5f5; } .tier-3-bg { background: #42a5f5; }
.tier-4 { color: #ab47bc; } .tier-4-bg { background: #ab47bc; }
.tier-5 { color: #ef5350; } .tier-5-bg { background: #ef5350; }
.tier-6 { color: #ffd700; text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); } 
.tier-6-bg { background: linear-gradient(90deg, #ffd700, #ffca28); }

/* 通用顏色 */
.text-gold { color: #ffd700; }
.text-red { color: #ff5252; }
.highlight { color: #ffd700; font-weight: bold; }
.intro-text { color: #ccc; margin-bottom: 15px; }

/* =========================================
   4. RWD 手機版
   ========================================= */
@media (max-width: 768px) {
    .map-card {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }
    
    .npc-img img {
        max-width: 100%;
        height: auto;
    }

    .target-box {
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }
}