/* style.css */

/* 全域設定 */
body {
    font-family: 'Arial', 'Microsoft JhengHei', sans-serif;
    background-color: #2c3e50;
    color: white;
    text-align: center;
    margin: 0;
    padding: 10px;
    overflow-x: hidden;
}

.game-container { max-width: 1200px; margin: 0 auto; }

/* 區塊 */
#login-section, #user-info {
    background: #34495e; padding: 15px; border-radius: 10px; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
input[type="text"], input[type="email"], input[type="password"] {
    background: #ecf0f1; border: none; padding: 8px; border-radius: 4px; margin: 5px 0;
}

/* 抽卡區塊佈局修正 */
.gacha-section {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 15px;
    margin-bottom: 20px;
    width: 100%;
}
.gacha-section button {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

/* 按鈕 */
.btn-primary, .btn-secondary, .btn-mini, .btn-danger { cursor: pointer; border: none; border-radius: 5px; transition: transform 0.1s; }
.btn-primary { background-color: #e74c3c; color: white; padding: 10px 20px; font-size: 1em; margin: 5px; }
.btn-secondary { background-color: #f39c12; color: white; padding: 10px 20px; font-size: 1em; margin: 5px; }
.btn-mini { background-color: #27ae60; color: white; padding: 2px 8px; font-size: 0.9em; margin-left: 5px; border-radius: 50%; font-weight: bold; }
.btn-danger { background-color: #c0392b; color: white; padding: 10px 20px; font-size: 1.1em; margin: 5px; border: 2px solid #e74c3c; font-weight: bold; }
.btn-upgrade { background-color: #27ae60; color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; width: 100%; font-weight: bold; }
.btn-star { background-color: #8e44ad; color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; width: 100%; font-weight: bold; }
.btn-disabled { background-color: #7f8c8d !important; cursor: not-allowed; opacity: 0.7; pointer-events: none; }
.btn-primary:active, .btn-secondary:active, .btn-mini:active, .btn-danger:active { transform: scale(0.95); }

/* 佈局 */
.main-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.game-area { flex: 2; min-width: 300px; width: 100%; }
.leaderboard-area { flex: 1; min-width: 250px; background: #2c3e50; border: 2px solid #7f8c8d; padding: 15px; border-radius: 10px; width: 100%; }
.status-bar { background: #34495e; padding: 10px; border-radius: 8px; margin-bottom: 20px; font-size: 1.1em; font-weight: bold; }

/* 排行榜優化 */
.rank-item { display: flex; justify-content: space-between; padding: 10px; border-bottom: 1px solid #555; font-size: 0.95em; align-items: center; }
.rank-item:last-child { border-bottom: none; }
.rank-item span:nth-child(1) { flex: 2; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rank-item span:nth-child(2) { flex: 1; text-align: right; color: #bdc3c7; }
.rank-item:nth-child(1) span:nth-child(1) { color: #f1c40f; font-weight: bold; text-shadow: 0 0 5px gold; } 
.rank-item:nth-child(2) span:nth-child(1) { color: #bdc3c7; font-weight: bold; text-shadow: 0 0 5px silver; }
.rank-item:nth-child(3) span:nth-child(1) { color: #e67e22; font-weight: bold; text-shadow: 0 0 5px #d35400; }

/* 卡片 */
.card-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-top: 20px; }
.card {
    width: 120px; height: 180px; position: relative; background: #000;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5); transition: transform 0.2s; border-radius: 8px; 
    cursor: pointer; touch-action: manipulation; box-sizing: border-box;
}
@media (max-width: 600px) { .card { width: 100px; height: 150px; } .status-bar { font-size: 0.9em; } }
.card:hover { transform: translateY(-5px); z-index: 50; }
.card-img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; position: absolute; top: 0; left: 0; z-index: 1; }
.card-frame-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; object-fit: fill; background: transparent; }

/* 卡片資訊 */
.card-info-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; 
    background: linear-gradient(to top, rgba(0,0,0,0.95) 15%, rgba(0,0,0,0.7) 50%, transparent 100%);
    color: white; padding: 5px 0; text-align: center; border-radius: 0 0 8px 8px; 
    z-index: 20; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-end; min-height: 40%; 
}
.card-title { font-size: 0.65em; color: #bdc3c7; margin-bottom: 1px; text-shadow: 1px 1px 2px #000; letter-spacing: 1px; }
.card-name { font-size: 0.9em; font-weight: bold; color: #fff; margin-bottom: 2px; text-shadow: 0 0 5px #000, 1px 1px 2px black; line-height: 1.1; }
.card-stats { font-size: 0.75em; color: #f1c40f; display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; background: rgba(0,0,0,0.3); padding: 2px 0; margin-top: 2px; align-items: center;}
.card-level-star { font-size: 0.7em; color: #00d2d3; margin-bottom: 1px; }
.type-icon { font-size: 1.1em; margin-right: 2px; }

img[src=""], img:not([src]) { display: none; }

.card-id-badge {
    position: absolute; top: 5px; left: 5px; background: rgba(0,0,0,0.7); color: #fff;
    padding: 2px 5px; border-radius: 4px; font-size: 0.7em; font-family: monospace; z-index: 15; pointer-events: none; border: 1px solid #777;
}
.card-rarity-badge {
    position: absolute; top: 5px; right: 5px; padding: 2px 6px; border-radius: 4px; font-size: 0.8em; font-weight: bold;
    z-index: 15; pointer-events: none; border: 1px solid rgba(255,255,255,0.4); box-shadow: 0 2px 4px rgba(0,0,0,0.5); font-family: Arial, sans-serif;
}
.card-rarity-badge.SSR { background: linear-gradient(45deg, #f1c40f, #f39c12); color: #000; }
.card-rarity-badge.SR { background: linear-gradient(45deg, #9b59b6, #8e44ad); color: #fff; }
.card-rarity-badge.R { background: linear-gradient(45deg, #3498db, #2980b9); color: #fff; }

/* 彈窗 */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 2000; display: flex; justify-content: center; align-items: center; flex-direction: column; }

/* 🔥 修正：讓背包彈窗層級高於冒險準備畫面 (2500) */
#inventory-modal { z-index: 2600; }

.modal-content { background: #2c3e50; width: 90%; max-width: 1000px; height: 80%; border-radius: 10px; border: 2px solid #f1c40f; display: flex; flex-direction: column; padding: 20px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; border-bottom: 1px solid #555; padding-bottom: 10px; }
#inventory-grid { flex: 1; overflow-y: auto; padding: 10px; }
.filter-bar { display: flex; justify-content: center; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
.filter-btn { background: transparent; border: 2px solid #ddd; color: #ddd; padding: 5px 15px; border-radius: 20px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.filter-btn:hover { background: rgba(255,255,255,0.1); }
.filter-btn.active { background: #fff; color: #2c3e50 !important; border-color: #fff !important; }
.sort-dropdown { background: #34495e; color: white; border: 1px solid #7f8c8d; padding: 5px; border-radius: 5px; font-size: 0.9em; }

/* 通知列表樣式 */
.notification-item { background: #34495e; border: 1px solid #7f8c8d; padding: 15px; border-radius: 8px; margin-bottom: 10px; cursor: pointer; transition: 0.2s; display: flex; justify-content: space-between; align-items: center; }
.notification-item:hover { background: #2c3e50; border-color: #f1c40f; }
.notification-item.claimed { opacity: 0.5; filter: grayscale(1); pointer-events: none; border-color: #555; }
.notif-title { font-weight: bold; font-size: 1.1em; color: #f1c40f; }
.notif-status { font-size: 0.9em; background: #e74c3c; padding: 3px 8px; border-radius: 4px; }
.notification-item.claimed .notif-status { background: #7f8c8d; }

/* 設定 */
.settings-body { text-align: left; padding: 10px; }
.setting-item { margin-bottom: 15px; }
.setting-item label { display: block; font-weight: bold; margin-bottom: 5px; color: #f1c40f; }
.control-row { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
input[type="range"] { accent-color: #e67e22; cursor: pointer; }
input[type="checkbox"] { transform: scale(1.5); cursor: pointer; }

/* 大卡片 */
.large-card-container { perspective: 1000px; }
.large-card { width: 300px; height: 450px; position: relative; border-radius: 15px; box-shadow: 0 0 30px rgba(255, 255, 255, 0.2); animation: popIn 0.3s ease-out; }
.large-card .card-title { font-size: 1.2em; margin-bottom: 5px; }
.large-card .card-name { font-size: 2em; margin-bottom: 5px; }
.large-card .card-stats { font-size: 1.4em; padding: 5px; }
.large-card .card-info-overlay { min-height: 30%; background: linear-gradient(to top, rgba(0,0,0,0.9) 20%, transparent 100%); }
.large-card.ssr-effect::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150%; height: 150%; background: radial-gradient(circle, rgba(255,215,0,0.6) 0%, rgba(0,0,0,0) 70%); animation: rotate-glow 5s linear infinite; z-index: -1; }
@media (max-width: 600px) { .large-card { width: 240px; height: 360px; } }
.large-card .card-level-star { font-size: 1em; color: #00d2d3; margin-top: 5px; display: block;}
.large-card .card-id-badge { font-size: 1.2em; padding: 5px 10px; top: 10px; left: 10px; }
.large-card .card-img, .large-card .card-frame-img { border-radius: 15px; }

.upgrade-controls { display: flex; gap: 10px; margin-top: 20px; z-index: 102; width: 100%; max-width: 320px; }
.upgrade-box { flex: 1; background: rgba(0,0,0,0.6); padding: 10px; border-radius: 8px; border: 1px solid #555; display: flex; flex-direction: column; justify-content: space-between; }
.upgrade-title { font-size: 0.9em; color: #f1c40f; margin-bottom: 5px; font-weight: bold; }

.nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.3); color: white; border: 2px solid rgba(255,255,255,0.5); font-size: 2em; width: 50px; height: 50px; padding: 0; cursor: pointer; border-radius: 50%; user-select: none; z-index: 101; display: flex; align-items: center; justify-content: center; line-height: 1; }
.nav-arrow.left { left: 20px; }
.nav-arrow.right { right: 20px; }
.btn-close-circle { position: absolute; top: 20px; right: 20px; background: rgba(0,0,0,0.5); color: white; border: 2px solid white; width: 40px; height: 40px; border-radius: 50%; font-size: 1.2em; cursor: pointer; z-index: 102; }

/* 批量分解 */
.card.is-selected { border: 3px solid #e74c3c !important; transform: translateY(-5px); box-shadow: 0 0 15px rgba(231, 76, 60, 0.6); }
.card.is-selected::after { content: '✔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3em; color: #e74c3c; border: 3px solid #e74c3c; border-radius: 50%; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.7); z-index: 50; pointer-events: none; }
#batch-toggle-btn { background-color: #34495e; border: 2px solid #95a5a6; color: white; padding: 5px 15px; border-radius: 20px; font-weight: bold; cursor: pointer; margin-left: 10px; transition: 0.3s; }
#batch-toggle-btn.active { background-color: #e74c3c; border-color: #c0392b; box-shadow: 0 0 10px #e74c3c; }
#batch-action-bar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(44, 62, 80, 0.95); border: 2px solid #e74c3c; padding: 10px 20px; border-radius: 50px; display: flex; align-items: center; gap: 15px; z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,0.5); width: 90%; max-width: 500px; justify-content: space-between; }
#batch-info { font-size: 1.1em; font-weight: bold; color: #fff; }
#batch-confirm-btn { background: #e74c3c; color: white; border: none; padding: 8px 20px; border-radius: 20px; font-weight: bold; cursor: pointer; font-size: 1em; }
#batch-confirm-btn:hover { background: #c0392b; }

/* 🔥 戰鬥中：已部署卡片樣式 🔥 */
.card.is-deployed { filter: grayscale(1) brightness(0.6); pointer-events: none; border-color: #7f8c8d !important; }
.card.is-deployed::after { content: '已部署'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.2em; font-weight: bold; color: white; background: rgba(0,0,0,0.7); padding: 5px 10px; border-radius: 5px; white-space: nowrap; z-index: 30; }

/* CSS 純色邊框 */
.card { border: 2px solid #555; }
.card.R { border-color: #3498db; box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); }
.card.SR { border-color: #9b59b6; box-shadow: 0 0 8px rgba(155, 89, 182, 0.5); }
.card.SSR { border-color: #f1c40f; box-shadow: 0 0 15px rgba(241, 196, 15, 0.8); animation: goldPulse 1.5s infinite alternate; }

/* SSR 特效動畫 */
@keyframes popIn { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes rotate-glow { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes goldPulse { from { box-shadow: 0 0 10px rgba(241, 196, 15, 0.5); } to { box-shadow: 0 0 25px rgba(241, 196, 15, 1); } }
#gacha-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 999; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#summon-circle { width: 150px; height: 150px; border-radius: 50%; background: white; box-shadow: 0 0 20px white; animation: pulse 0.8s infinite alternate; z-index: 1001; }
.glow-r { background: #3498db !important; box-shadow: 0 0 30px #3498db !important; }
.glow-sr { background: #9b59b6 !important; box-shadow: 0 0 40px #9b59b6 !important; animation: pulse 0.5s infinite alternate !important; }
.glow-ssr { background: #f1c40f !important; box-shadow: 0 0 80px #f1c40f, 0 0 150px orange, 0 0 200px red !important; animation: superShake 0.1s infinite !important; }
#summon-burst { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,215,0,0.8) 40%, transparent 80%); opacity: 0; z-index: 1000; }
.burst-active { animation: holyBurst 1s forwards ease-out; }
@keyframes pulse { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.2); opacity: 1; } }
@keyframes superShake { 0% { transform: translate(2px, 2px) rotate(0deg); } 25% { transform: translate(-2px, -2px) rotate(-2deg); } 50% { transform: translate(2px, -2px) rotate(2deg); } 75% { transform: translate(-2px, 2px) rotate(-2deg); } 100% { transform: translate(2px, 2px) rotate(0deg); } }
@keyframes holyBurst { 0% { width: 0; height: 0; opacity: 1; } 50% { width: 200vw; height: 200vw; opacity: 0.8; } 100% { width: 300vw; height: 300vw; opacity: 0; } }
.flash-screen { animation: flash 1.5s forwards; background: white !important; z-index: 2000; }
@keyframes flash { 0% { background: rgba(0,0,0,0.9); } 20% { background: white; opacity: 1; } 100% { background: rgba(0,0,0,0); opacity: 0; display: none; } }
.hidden { display: none !important; }

/* --- ⚔️ 戰鬥系統樣式 (三線版) --- */
#battle-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #2c3e50; z-index: 1500; display: flex; flex-direction: column; }
.battle-header { background: rgba(0,0,0,0.8); padding: 10px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.5); z-index: 101; }
.battle-info { font-weight: bold; color: #f1c40f; display: flex; gap: 15px; font-size: 0.9em; }

/* 戰場容器 */
.battle-field-container {
    flex: 1; position: relative; background: #34495e; overflow: hidden; border-top: 2px solid #555; border-bottom: 2px solid #555;
    background-image: linear-gradient(#2c3e50 1px, transparent 1px), linear-gradient(90deg, #2c3e50 1px, transparent 1px);
    background-size: 40px 40px; background-color: #1a252f;
}

/* 主堡 (改為出擊線) */
.spawn-line { position: absolute; top: 0; bottom: 0; width: 5px; border-right: 2px dashed rgba(255,255,255,0.2); }
.spawn-line.left { left: 10px; }

.base-health-bar { display: none; } /* 隱藏血條 */

/* 三條路線 */
.lanes-wrapper { flex: 1; display: flex; flex-direction: column; height: 100%; }
.lane-row { flex: 1; display: flex; justify-content: space-around; align-items: center; border-bottom: 1px dashed rgba(255,255,255,0.1); position: relative; }
.lane-row:last-child { border-bottom: none; }

/* 防禦槽位 */
.defense-slot { width: 70px; height: 90px; border: 2px dashed #7f8c8d; border-radius: 6px; background: rgba(255,255,255,0.05); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; transition: 0.2s; cursor: pointer; }
.defense-slot.active { border-style: solid; border-color: #f1c40f; background: rgba(241, 196, 15, 0.1); }
.defense-slot .card { transform: scale(0.45); pointer-events: none; margin: 0; border-width: 2px; box-shadow: none; position: absolute; top: 50%; left: 50%; translate: -50% -50%; } 
.slot-placeholder { color: #aaa; font-size: 0.8em; text-align: center; pointer-events: none; }

/* 敵人出生區 */
.enemy-spawn-zone { width: 50px; height: 100%; background: rgba(0,0,0,0.3); border-left: 4px dashed #c0392b; display: flex; justify-content: center; align-items: center; color: #e74c3c; font-weight: bold; writing-mode: vertical-lr; z-index: 10; }

/* 🔥 英雄單位 (跑動中) - 2倍化修正 🔥 */
.hero-unit { 
    position: absolute; 
    width: 90px; /* 45px * 2 */
    height: 90px; /* 45px * 2 */
    border-radius: 50%; 
    border: 4px solid #fff; /* 邊框加粗 */
    display: flex; justify-content: center; align-items: center; 
    font-size: 1.2em; z-index: 20; 
    transition: left 0.1s linear; 
    box-shadow: 0 0 10px rgba(0,0,0,0.5); 
    transform: translateY(-50%); 
    background-size: cover; 
    background-position: center 15%;
}
.hero-unit.SSR { border-color: #f1c40f; }
.hero-unit.SR { border-color: #9b59b6; }
.hero-unit.R { border-color: #3498db; }

/* 🔥 修正：血條加入置中設定，防止轉向時亂跑 🔥 */
.hero-hp-bar, .enemy-hp-bar { 
    position: absolute; 
    top: -24px; /* 往上移，留空間給氣力條 */
    width: 70px; /* 35px * 2 */
    height: 8px; /* 4px * 2 */
    background: #555; 
    border-radius: 4px; 
    /* 強制置中 */
    left: 50%;
    transform: translateX(-50%);
}
.hero-hp-bar > div { height: 100%; background: #2ecc71; border-radius: 4px; }
.enemy-hp-bar > div { height: 100%; background: #e74c3c; border-radius: 4px; }

/* 🔥 修正：氣力條加入置中設定 🔥 */
.hero-mana-bar {
    position: absolute;
    top: -12px; /* 位於血條下方 */
    width: 70px; /* 35px * 2 */
    height: 8px; /* 4px * 2 */
    background: #333;
    border-radius: 4px;
    overflow: hidden;
    z-index: 25;
    /* 強制置中 */
    left: 50%;
    transform: translateX(-50%);
}

.hero-mana-bar > div {
    height: 100%;
    background: #3498db; /* 藍色 */
    width: 0%;
    transition: width 0.2s linear;
}

/* 🔥 氣力全滿時的發光特效 (修改為外圈橘光) */
/* 使用偽元素製作外圈，不覆蓋原本的 border-color */
.hero-unit.mana-full::after {
    content: '';
    position: absolute;
    /* 設定比原本大一圈 */
    top: -15px; 
    left: -15px; 
    right: -15px; 
    bottom: -15px;
    border-radius: 50%;
    
    /* 橘色光圈 */
    border: 3px solid #e67e22; 
    box-shadow: 0 0 15px #e67e22, inset 0 0 5px #f39c12; 
    
    /* 確保位於圖層最下方，不遮擋稀有度框 */
    z-index: -1; 
    
    animation: manaRingPulse 0.6s infinite alternate;
}

@keyframes manaRingPulse {
    from { transform: scale(0.95); opacity: 0.7; }
    to { transform: scale(1.1); opacity: 1; }
}

/* 🔷 技能發動時的飄字特效 (稱號) */
.damage-text.skill-title {
    color: #f1c40f; /* 金色字體 */
    font-size: 1.5em;
    font-weight: 900;
    text-shadow: 
        0 0 5px #e74c3c,
        0 0 10px #c0392b,
        2px 2px 0px #000;
    z-index: 300;
    animation: skillFloat 1.2s forwards;
    white-space: nowrap;
}

@keyframes skillFloat {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    20% { transform: translateY(-20px) scale(1.5); opacity: 1; }
    80% { transform: translateY(-40px) scale(1); opacity: 1; }
    100% { transform: translateY(-50px) scale(0.8); opacity: 0; }
}

/* 敵人實體 - 2倍化修正 */
.enemy-unit { 
    position: absolute; 
    width: 90px; /* 40px * 2 + 調整 */
    height: 90px; 
    background: #e74c3c; 
    border-radius: 50%; 
    border: 4px solid #fff; 
    display: flex; justify-content: center; align-items: center; 
    font-size: 1.2em; z-index: 5; 
    transition: left 0.1s linear; 
    box-shadow: 0 0 10px rgba(0,0,0,0.5); 
    transform: translateY(-50%); 
}

/* 🔥 魔王樣式 - 巨大化修正 */
.enemy-unit.boss { 
    width: 200px !important;  /* 原本 110px -> 200px */
    height: 200px !important;
    background: rgba(0,0,0,0.6);
    border-radius: 5px; /* 微微圓角的正方形 */
    z-index: 50;
    font-size: 5em; /* Emoji 變大 */
    
    /* 移除舊邊框，改用偽元素 */
    border: none; 
    box-shadow: 0 0 30px #c0392b; 

    /* 保持 flex 讓 Emoji 居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 旋轉外框 - 內層 */
.enemy-unit.boss::before {
    content: '';
    position: absolute;
    top: -15px; left: -15px; right: -15px; bottom: -15px;
    border: 4px dashed #8e44ad; /* 紫色虛線 */
    border-radius: 5px;
    box-shadow: 0 0 20px #8e44ad;
    animation: bossSpin 4s linear infinite;
    z-index: -1;
}

/* 旋轉外框 - 外層 (增加威力感) */
.enemy-unit.boss::after {
    content: '';
    position: absolute;
    top: -25px; left: -25px; right: -25px; bottom: -25px;
    border: 3px solid #f1c40f; /* 金色外框 */
    border-radius: 5px;
    box-shadow: 0 0 30px #f1c40f;
    animation: bossSpin 6s linear infinite reverse; /* 反向旋轉 */
    z-index: -2;
}

/* 🔥 魔王血條位置調整 - 2倍化修正 & 加入置中 */
.enemy-unit.boss .enemy-hp-bar { 
    top: -40px; 
    width: 180px; 
    height: 14px; 
    border: 2px solid rgba(255,255,255,0.8);
    /* 強制置中 */
    left: 50%;
    transform: translateX(-50%);
}

/* 旋轉動畫定義 */
@keyframes bossSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 底部 */
.battle-deck { background: #2c3e50; border-top: 2px solid #f1c40f; padding: 10px; display: flex; flex-direction: column; }
.difficulty-btn { border: none; padding: 5px 15px; border-radius: 20px; color: white; font-weight: bold; cursor: pointer; opacity: 0.5; transition: 0.2s; }
.difficulty-btn.active { opacity: 1; transform: scale(1.1); box-shadow: 0 0 10px white; }

/* 傷害飄字 - 基礎樣式 */
.damage-text { position: absolute; font-weight: bold; font-size: 1.2em; text-shadow: 0 0 3px #000; pointer-events: none; z-index: 100; animation: floatUp 0.8s forwards; color: #fff; }

/* 傷害飄字 - 顏色變體 */
.damage-text.hero-dmg { 
    color: #ffffff; 
    font-size: 1.6em; 
    text-shadow: 
        2px 0 0 #000, -2px 0 0 #000, 
        0 2px 0 #000, 0 -2px 0 #000, 
        1px 1px #000, -1px -1px #000, 
        1px -1px #000, -1px 1px #000;
    font-weight: 900;
    z-index: 200;
}
.damage-text.enemy-dmg { color: #e74c3c; font-size: 1.3em; }
.damage-text.gold-text { color: #f39c12; font-size: 1.2em; text-shadow: 0 0 5px gold; }

@keyframes floatUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-30px); opacity: 0; } }

/* 🔥 飛行道具 (Projectile) 🔥 */
.projectile {
    position: absolute;
    z-index: 50;
    transition: all 0.3s linear;
    pointer-events: none;
    font-size: 2em;
    filter: drop-shadow(0 0 5px white);
}
/* 🔥 魔王投射物 (火球/暗黑球) */
.boss-projectile {
    position: absolute; z-index: 60;
    width: 30px; height: 30px;
    background: radial-gradient(circle, #fff, #4a0072);
    border-radius: 50%;
    box-shadow: 0 0 15px #8e44ad;
    transition: all 0.5s linear;
    pointer-events: none;
    animation: spin 0.5s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

/* 🔥 噴毒動畫 */
.poison-effect {
    position: absolute; width: 100px; height: 100px; 
    background: radial-gradient(circle, #00ff00, transparent); 
    border-radius: 50%; opacity: 0.9; z-index: 99; pointer-events: none;
    transform: translate(-50%, -50%);
    animation: poisonSplash 0.5s forwards;
}
@keyframes poisonSplash {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* 🔥 魔王 AoE 特效 */
.boss-aoe-effect {
    position: absolute; width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(142, 68, 173, 0.8), transparent 70%);
    border-radius: 50%;
    z-index: 99; pointer-events: none;
    transform: translate(-50%, -50%);
    animation: bossExplosion 0.6s ease-out forwards;
}
@keyframes bossExplosion {
    0% { transform: translate(-50%, -50%) scale(0.1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* 受傷震動 */
.card.taking-damage {
    animation: cardDamageShake 0.4s ease-out;
}
@keyframes cardDamageShake {
    0% { transform: translate(-50%, -50%) scale(0.45) rotate(0deg); filter: none; }
    20% { transform: translate(-55%, -50%) scale(0.5) rotate(-10deg); filter: sepia(1) hue-rotate(-50deg) saturate(5) brightness(1.5); }
    40% { transform: translate(-45%, -50%) scale(0.45) rotate(10deg); }
    60% { transform: translate(-55%, -50%) scale(0.5) rotate(-10deg); filter: sepia(1) hue-rotate(-50deg) saturate(5) brightness(1.5); }
    100% { transform: translate(-50%, -50%) scale(0.45) rotate(0deg); filter: none; }
}

.hero-unit.taking-damage, .enemy-unit.taking-damage {
    animation: unitDamageShake 0.4s ease-out;
}
@keyframes unitDamageShake {
    0% { transform: translateY(-50%) scale(1) rotate(0deg); filter: none; }
    20% { transform: translateY(-50%) scale(0.9) rotate(-10deg); filter: sepia(1) hue-rotate(-50deg) saturate(5) brightness(1.5); }
    40% { transform: translateY(-50%) scale(1.05) rotate(10deg); }
    60% { transform: translateY(-50%) scale(0.9) rotate(-10deg); filter: sepia(1) hue-rotate(-50deg) saturate(5) brightness(1.5); }
    100% { transform: translateY(-50%) scale(1) rotate(0deg); filter: none; }
}

/* 螢幕震動 */
@keyframes shakeScreen { 0% { transform: translate(0, 0); } 25% { transform: translate(-5px, 5px); } 50% { transform: translate(5px, -5px); } 75% { transform: translate(-5px, -5px); } 100% { transform: translate(0, 0); } }
.shake-screen-effect { animation: shakeScreen 0.3s ease-in-out; }

/* 動態血條顏色 */
.hp-low { background: #e74c3c !important; box-shadow: 0 0 5px #c0392b; } 
.hp-mid { background: #f1c40f !important; }

/* 戰鬥結算彈窗 */
#battle-result-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 3000; display: flex; justify-content: center; align-items: center; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.result-content { background: #2c3e50; border: 4px solid #f1c40f; border-radius: 15px; padding: 30px; text-align: center; width: 300px; box-shadow: 0 0 50px rgba(241, 196, 15, 0.5); }
.result-title { font-size: 2.5em; margin-bottom: 10px; font-weight: bold; }
.result-gold { font-size: 1.5em; color: #f1c40f; margin-bottom: 20px; }
.win-text { color: #2ecc71; text-shadow: 0 0 10px #2ecc71; }
.lose-text { color: #e74c3c; text-shadow: 0 0 10px #e74c3c; }

/* 波次提示 */
#wave-notification {
    position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%);
    font-size: 3em; font-weight: bold; color: #e74c3c; text-shadow: 0 0 20px black; z-index: 100;
    animation: waveFade 2s forwards; pointer-events: none;
}
@keyframes waveFade { 0% { opacity: 0; transform: translate(-50%, -30%); } 20% { opacity: 1; transform: translate(-50%, -50%); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* 主堡雷射 */
.base-laser {
    position: absolute; top: 50%; left: 80px; width: 0; height: 4px; background: #00ffff; box-shadow: 0 0 10px #00ffff; z-index: 9;
    transform-origin: left center; animation: laserShoot 0.2s forwards;
}
@keyframes laserShoot { 0% { opacity: 1; } 100% { opacity: 0; } }

/* DPS 表 */
.dps-container {
    margin-top: 15px; background: #222; padding: 10px; border-radius: 5px; text-align: left;
    max-height: 200px; overflow-y: auto;
}
.dps-row {
    display: flex; align-items: center; margin-bottom: 8px;
}
.dps-icon {
    width: 30px; height: 30px; border-radius: 50%; background-size: cover; margin-right: 10px; flex-shrink: 0;
}
.dps-bar-container {
    flex: 1;
}
.dps-info {
    display: flex; justify-content: space-between; font-size: 0.8em; margin-bottom: 2px;
}
.dps-bar-bg {
    width: 100%; height: 6px; background: #555; border-radius: 3px; overflow: hidden;
}
.dps-bar-fill {
    height: 100%; background: #f1c40f; transition: width 0.5s ease-out;
}

/* 🔥 修正 1：兵種圖示改到右下角，避免擋住人物 - 2倍化修正 */
.hero-type-badge {
    position: absolute; 
    bottom: -5px; 
    right: -5px; 
    top: auto;
    width: 32px; height: 32px; /* 變大 */
    background: #3498db; border-radius: 50%; 
    font-size: 18px; /* 字體變大 */
    display: flex; justify-content: center; align-items: center; color: white;
    z-index: 25;
    border: 2px solid white; /* 增加白邊 */
}

/* 🔥 新增：遠程兵種圖示改為紅色 */
.hero-type-badge.ranged {
    background-color: #e74c3c;
}

/* 戰鬥內容容器 */
.battle-content-wrapper {
    position: relative; 
    overflow: hidden; 
}

/* 修改戰鬥側邊欄：加入過渡動畫 */
.battle-monitor-sidebar {
    width: 180px; 
    background: #222; 
    border-left: 1px solid #444; 
    padding: 10px; 
    overflow-y: auto;
    display: flex; 
    flex-direction: column; 
    gap: 8px;
    transition: width 0.3s ease, padding 0.3s ease;
    flex-shrink: 0;
}

.monitor-item {
    display: flex; align-items: center; gap: 8px; background: #333; padding: 5px; border-radius: 5px;
}
.monitor-item.dead { opacity: 0.4; filter: grayscale(1); }
.monitor-icon { width: 30px; height: 30px; border-radius: 50%; background-size: cover; flex-shrink: 0; border: 1px solid #777; }
.monitor-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.monitor-name { font-size: 0.75em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monitor-hp-bg { width: 100%; height: 6px; background: #555; border-radius: 3px; overflow: hidden; }
.monitor-hp-fill { height: 100%; background: #2ecc71; transition: width 0.2s; width: 100%; }

/* 🔥 新增：側邊欄氣力條 */
.monitor-mana-bg {
    width: 100%; height: 4px; background: #333; border-radius: 2px; overflow: hidden; margin-top: 2px;
}
.monitor-mana-fill {
    height: 100%; background: #3498db; width: 0%; transition: width 0.2s;
}

/* 🔥 新增：側邊欄摺疊狀態 */
.battle-monitor-sidebar.collapsed {
    width: 0;
    padding: 10px 0; 
    border-left: none;
    overflow: hidden;
}

/* 🔥 新增：側邊欄切換按鈕 */
#toggle-sidebar-btn {
    position: absolute;
    right: 180px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 60px;
    background: #34495e;
    border: 1px solid #7f8c8d;
    border-right: none;
    border-radius: 10px 0 0 10px;
    color: #f1c40f;
    font-size: 1.2em;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: right 0.3s ease;
    padding: 0;
}

#toggle-sidebar-btn:hover {
    background: #2c3e50;
    color: white;
}

.battle-monitor-sidebar.collapsed + #toggle-sidebar-btn,
#toggle-sidebar-btn.collapsed-pos {
    right: 0;
    border-right: 1px solid #7f8c8d;
    border-left: none;
    border-radius: 10px 0 0 10px;
}

/* =========================================
   === PVP 功能樣式 ===
   ========================================= */

/* PVP VS 介面 */
.vs-container {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(0, 0, 0, 0.3); padding: 20px; border-radius: 10px; margin-bottom: 20px;
}
.player-card { text-align: center; flex: 1; }
.player-card.self { color: #3498db; }
.player-card.enemy { color: #e74c3c; }
.p-name { font-size: 1.5em; font-weight: bold; margin-bottom: 5px; }
.p-power { font-size: 1.2em; color: #f1c40f; }

/* PVP 格子樣式調整 */
.pvp-grid-container { display: flex; flex-direction: column; gap: 5px; }
.pvp-grid-container .defense-slot { width: 50px; height: 50px; margin-right: 10px; }
.pvp-grid-container .lane-row { height: auto; padding: 5px; border: none; justify-content: center; }

/* 進攻/防守不同色 */
.pvp-defense-slot { border-color: #f1c40f; }
.pvp-attack-slot { border-color: #3498db; }

/* 對手列表樣式 */
.opponent-list-container { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.opponent-list-item {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(255,255,255,0.1); padding: 10px 15px; border-radius: 8px;
    border: 1px solid #555; transition: 0.2s;
}
.opponent-list-item:hover { background: rgba(255,255,255,0.2); border-color: #aaa; }
.opp-info { text-align: left; }
.opp-name { font-weight: bold; font-size: 1.1em; color: #ecf0f1; }
.opp-power { font-size: 0.9em; color: #f1c40f; }
.opp-tag { font-size: 0.8em; padding: 2px 5px; border-radius: 3px; margin-left: 5px; }
.tag-strong { background: #e74c3c; color: white; }
.tag-weak { background: #2ecc71; color: #2c3e50; }

/* 戰鬥日誌 (Battle Log) 樣式 */
.notif-battle-log {
    border-left: 5px solid #ccc;
}
.log-def-win {
    border-left-color: #2ecc71; /* 綠色：防守勝利 */
    background: rgba(46, 204, 113, 0.1);
}
.log-def-lose {
    border-left-color: #e74c3c; /* 紅色：防守失敗 */
    background: rgba(231, 76, 60, 0.1);
}

/* =========================================
   === ⚡ 技能特效 (新增) ===
   ========================================= */

/* 治療光環 */
.skill-effect-heal {
    position: absolute;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(46, 204, 113, 0.5) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none; z-index: 50;
    animation: skillHealAnim 1s ease-out forwards;
}
@keyframes skillHealAnim {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* 戰吼 (Buff) */
.skill-effect-buff {
    position: absolute;
    width: 80px; height: 80px;
    border-radius: 50%;
    border: 2px solid #f1c40f;
    box-shadow: 0 0 10px gold;
    transform: translate(-50%, -50%);
    pointer-events: none; z-index: 50;
    animation: skillBuffAnim 0.8s ease-out forwards;
}
@keyframes skillBuffAnim {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* 無敵護盾 */
.invincible-shield {
    box-shadow: 0 0 15px gold, inset 0 0 10px gold !important;
    border-color: gold !important;
    animation: shieldPulse 0.5s infinite alternate !important;
}
@keyframes shieldPulse {
    from { opacity: 0.8; } to { opacity: 1; }
}

/* AoE 爆炸 */
.aoe-blast {
    position: absolute;
    width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(231, 76, 60, 0.8) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none; z-index: 100;
    animation: blastAnim 0.5s ease-out forwards;
}
@keyframes blastAnim {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
    50% { opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

/* 全場轟炸 */
.global-bomb-effect {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: white; opacity: 0;
    z-index: 2000; pointer-events: none;
    animation: globalFlash 0.3s ease-out;
}
@keyframes globalFlash {
    0% { opacity: 0.5; } 100% { opacity: 0; }
}

/* =========================================
   === 🎴 卡片翻轉特效 (新增) ===
   ========================================= */

/* 大卡片容器 (移除背景，改為 3D 空間) */
.large-card {
    background-color: transparent !important;
    perspective: 1000px; /* 設定 3D 景深 */
    cursor: pointer;
    box-shadow: none !important; /* 陰影移給內層 */
    border: none !important; /* 邊框移給內層 */
}

/* 內層容器 (負責旋轉) */
.large-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
    border-radius: 15px;
}

/* 觸發翻轉 */
.large-card.is-flipped .large-card-inner {
    transform: rotateY(180deg);
}

/* 正面與背面共用設定 */
.large-card-front, .large-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* 隱藏背面 */
    backface-visibility: hidden;
    border-radius: 15px;
    overflow: hidden;
    top: 0; left: 0;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); /* 統一陰影 */
}

/* --- 正面設定 --- */
.large-card-front {
    background: #000;
    transform: rotateY(0deg);
    z-index: 2;
}

/* 修正 SSR 光效在正面顯示 */
.large-card-front.ssr-effect::before {
    content: ''; position: absolute; top: 50%; left: 50%; 
    transform: translate(-50%, -50%); width: 150%; height: 150%; 
    background: radial-gradient(circle, rgba(255,215,0,0.6) 0%, rgba(0,0,0,0) 70%); 
    animation: rotate-glow 5s linear infinite; z-index: -1; 
}

/* --- 背面設定 --- */
.large-card-back {
    background: linear-gradient(135deg, #34495e 0%, #1a252f 100%);
    color: white;
    transform: rotateY(180deg); /* 預先旋轉 180 度 */
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    border: 3px solid #7f8c8d;
    text-align: left;
    overflow-y: auto; /* 內容多時可捲動 */
}

/* 背面稀有度邊框顏色 */
.large-card-back.SSR { border-color: #f1c40f; box-shadow: inset 0 0 30px rgba(241, 196, 15, 0.2); }
.large-card-back.SR { border-color: #9b59b6; box-shadow: inset 0 0 30px rgba(155, 89, 182, 0.2); }
.large-card-back.R { border-color: #3498db; box-shadow: inset 0 0 30px rgba(52, 152, 219, 0.2); }

/* 背面內容排版 */
.card-back-section { margin-bottom: 20px; }
.card-back-title {
    color: #f1c40f;
    font-size: 1.2em;
    font-weight: bold;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 5px;
    margin-bottom: 8px;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    display: flex; align-items: center; gap: 5px;
}
.card-back-text {
    font-size: 0.95em;
    line-height: 1.6;
    color: #ecf0f1;
    text-shadow: 1px 1px 2px black;
}
.flip-hint {
    margin-top: auto;
    text-align: center;
    font-size: 0.8em;
    color: #95a5a6;
    animation: pulse 2s infinite;
}

/* --- style.css 新增特效區 --- */

/* 1. 施法時英雄的集氣發光特效 */
.hero-casting {
    filter: brightness(1.5) drop-shadow(0 0 10px gold);
    transform: scale(1.1) !important;
    transition: all 0.2s ease-out;
    z-index: 100;
}

/* 2. 優化投射物 (火球/箭矢/劍氣) */
.projectile {
    position: absolute;
    z-index: 999;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    will-change: left, top;
}

/* 技能光球 */
.proj-skill {
    font-size: 2.5em;
    filter: drop-shadow(0 0 15px #f1c40f);
    animation: spin 0.5s linear infinite;
}

/* 3. 螢幕震動特效 (打擊感核心) */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.screen-shake {
    animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
}

/* 4. 全螢幕閃光 (大招用) */
.screen-flash-white {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: white; opacity: 0.8; z-index: 10000;
    pointer-events: none;
    animation: flashFade 0.4s forwards;
}
.screen-flash-dark {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: black; opacity: 0.7; z-index: 10000;
    pointer-events: none;
    animation: flashFade 0.6s forwards;
}
@keyframes flashFade { to { opacity: 0; } }

/* 5. 各種技能落地特效 (VFX) */
.vfx-container {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
    transform: translate(-50%, -50%); /* 中心對齊 */
}

/* (A) 爆炸/轟炸 */
.vfx-explosion {
    width: 120px; height: 120px;
    background: radial-gradient(circle, #f1c40f 10%, #e67e22 40%, transparent 70%);
    border-radius: 50%;
    animation: explodeAnim 0.5s ease-out forwards;
    filter: blur(2px);
}
@keyframes explodeAnim {
    0% { transform: scale(0.1); opacity: 1; }
    50% { opacity: 0.8; }
    100% { transform: scale(2.0); opacity: 0; }
}

/* (B) 斬擊 (斜向) */
.vfx-slash {
    width: 150px; height: 10px;
    background: white;
    box-shadow: 0 0 10px #e74c3c, 0 0 20px #c0392b;
    animation: slashAnim 0.3s ease-out forwards;
}
@keyframes slashAnim {
    0% { transform: scaleX(0) rotate(-45deg); opacity: 0; }
    20% { transform: scaleX(1) rotate(-45deg); opacity: 1; }
    100% { transform: scaleX(1.2) rotate(-45deg); opacity: 0; }
}

/* (C) 治療光柱 */
.vfx-heal-pillar {
    width: 60px; height: 200px;
    background: linear-gradient(to top, rgba(46, 204, 113, 0.8), transparent);
    animation: healAnim 0.8s ease-out forwards;
}
@keyframes healAnim {
    0% { transform: scaleY(0); opacity: 0; }
    20% { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(1.2) translateY(-20px); opacity: 0; }
}

/* (D) Buff 光環 */
.vfx-buff-ring {
    width: 100px; height: 100px;
    border: 5px solid #3498db;
    border-radius: 50%;
    box-shadow: 0 0 15px #3498db;
    opacity: 0;
    animation: buffAnim 0.8s ease-out forwards;
}
@keyframes buffAnim {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.0); opacity: 1; border-width: 5px; }
    100% { transform: scale(1.5); opacity: 0; border-width: 0px; }
}

/* (E) 斬殺特效 */
.vfx-execute {
    width: 200px; height: 200px;
    background: radial-gradient(circle, transparent 30%, #e74c3c 40%, transparent 50%);
    animation: executeAnim 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}
@keyframes executeAnim {
    0% { transform: scale(0) rotate(0deg); opacity: 1; }
    100% { transform: scale(1.5) rotate(180deg); opacity: 0; }
}

@keyframes spin { 100% { transform: rotate(360deg); } }

/* 敵方血條顏色 (紅色) */
.monitor-hp-fill.enemy {
    background: #e74c3c !important;
}

/* 確保側邊欄內容過多時可以捲動，且標題不會被擠壓 */
.battle-monitor-sidebar h3 {
    flex-shrink: 0;
}

/* 關卡選擇 Grid */
.level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    padding: 10px;
    overflow-y: auto;
}

.level-btn {
    background: #34495e;
    border: 2px solid #7f8c8d;
    color: white;
    padding: 20px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

.level-btn:hover {
    background: #2c3e50;
    border-color: #f1c40f;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(241, 196, 15, 0.3);
}

.level-btn .level-name {
    margin-top: 5px;
    font-size: 1.1em;
    font-weight: bold;
    color: #f1c40f;
}

/* 鎖定的關卡樣式 (預留用) */
.level-btn.locked {
    opacity: 0.6;
    filter: grayscale(1);
    /* cursor: not-allowed; */ /* 目前先不鎖，方便測試 */
}

/* 卡片背面容器：設定為彈性佈局，確保高度固定 */
.large-card-back {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    justify-content: flex-start;
    align-items: center;
    padding: 20px 15px; /* 增加內距 */
    box-sizing: border-box;
    overflow: hidden; /* 隱藏超出容器的部分，交給子元素捲動 */
    height: 100%; /* 確保佔滿整個卡片高度 */
}

/* 上半部：技能說明 (固定高度，不捲動) */
.card-skill-section {
    flex: 0 0 auto; /* 不會縮放 */
    width: 100%;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 10px;
}

/* 下半部：人物生平 */
.card-bio-section {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    
    /* 🔥 iOS 修正關鍵 1：開啟慣性捲動 */
    -webkit-overflow-scrolling: touch; 
    
    /* 🔥 iOS 修正關鍵 2：解決 3D 翻轉後無法捲動的 Bug */
    transform: translate3d(0,0,0);
    
    /* 其他樣式 */
    min-height: 0;
    text-align: left;
    padding-right: 5px;
    
    /* 讓點擊事件可以穿透到 JS 偵測 */
    pointer-events: auto; 
}

/* 確保背面容器的層級正確 */
.large-card-back {
    /* ...原有樣式... */
    background: linear-gradient(135deg, #34495e 0%, #1a252f 100%);
    color: white;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    border: 3px solid #7f8c8d;
    text-align: left;
    overflow: hidden; /* 這裡設為 hidden，捲動交給 bio-section */
    height: 100%;
    
    /* 🔥 iOS 修正關鍵 3：確保背面在翻轉後能接收觸控 */
    z-index: 10; 
}

/* 優化捲軸樣式 (讓它好看一點) */
.card-bio-section::-webkit-scrollbar {
    width: 6px;
}
.card-bio-section::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}
.card-bio-section::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
}
.card-bio-section::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* 確保標題樣式清晰 */
.card-back-title {
    color: #f1c40f;
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 5px;
    text-align: center;
}

.card-back-text {
    font-size: 0.9em;
    line-height: 1.5;
    color: #ecf0f1;
    white-space: pre-wrap; /* 保留換行格式 */
}

/* 底部提示字 */
.flip-hint {
    flex: 0 0 auto;
    margin-top: 10px;
    font-size: 0.8em;
    color: #95a5a6;
    opacity: 0.8;
}

/* 工作室 Logo 容器 */
.studio-logo-container {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* 上方分隔線 */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%; /* 確保容器寬度正確 */
}

/* Logo 圖片樣式 */
#studio-logo {
    /* 🔥 關鍵修正：限制最大寬度 */
    width: 100%;        /* 讓圖片具有響應式特性 */
    max-width: 360px;   /* 強制限制最大寬度為 120px (解決電腦版過大問題) */
    height: auto;       /* 保持原始長寬比，圖片才不會變形 */
    
    display: block;
    opacity: 0.9;       /* 稍微透明增加質感 */
    transition: transform 0.3s ease;
    margin-bottom: 5px; /* 讓圖片跟下方的文字有一點距離 */
}

/* 滑鼠移過去時的特效 */
#studio-logo:hover {
    transform: scale(1.05);
    opacity: 1;
}
/* =========================================
   🔥 圖鑑系統專用樣式 (請加在 style.css 最下方)
   ========================================= */

/* 1. 圖鑑容器佈局 (關鍵修正：讓它能滑動且不超出視窗) */
#gallery-grid {
    flex: 1;                     /* 自動填滿 Modal 剩餘空間 */
    overflow-y: auto;            /* 內容超出時顯示垂直捲軸 */
    align-content: flex-start;   /* 卡片從上方開始排列，不要分散對齊 */
    min-height: 0;               /* 防止 Flex 子元素溢出容器 */
    padding: 10px;               /* 內距 */
    
    /* 繼承 card-container 的排版特性 */
    display: flex;         
    flex-wrap: wrap;       
    justify-content: flex-start; /* 靠左對齊 */
    gap: 15px;                   /* 卡片間距 */
}

/* 2. 未獲得的卡片樣式：灰階 + 鎖頭 */
.card.locked {
    filter: grayscale(100%);     /* 黑白濾鏡 */
    opacity: 0.6;                /* 半透明 */
    cursor: not-allowed;         /* 禁止手勢 */
    position: relative;
    border-color: #555 !important; /* 強制灰色邊框 */
    box-shadow: none !important;   /* 移除發光特效 */
    animation: none !important;    /* 移除 SSR 跳動特效 */
}

/* 鎖頭圖示 (覆蓋在卡片上) */
.card.locked::after {
    content: "🔒";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 5px #000;
    pointer-events: none;
    z-index: 10;
}

/* 3. 圖鑑過濾按鈕 (獨立樣式，避免跟背包衝突) */
.gallery-filter-btn {
    background: transparent;
    border: 2px solid #ddd;
    color: #ddd;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    margin: 0 2px;
}

.gallery-filter-btn:hover {
    background: rgba(255,255,255,0.1);
}

.gallery-filter-btn.active {
    background: #fff;
    color: #2c3e50 !important;
    border-color: #fff !important;
}

/* =========================================
   🔥 魔王 AOE 特效 (新增)
   ========================================= */

/* 通用容器位置設定 */
.vfx-boss-shockwave, .vfx-boss-explosion, .vfx-boss-storm, .vfx-boss-slash-spin {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 500;
}

/* 1. 震波 (Shockwave) */
.vfx-boss-shockwave {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 5px solid transparent; /* 顏色由 JS 動態控制 */
    opacity: 0.8;
    animation: bossShockwaveAnim 0.8s ease-out forwards;
}

@keyframes bossShockwaveAnim {
    0% { width: 20px; height: 20px; opacity: 1; border-width: 5px; }
    100% { width: 300px; height: 300px; opacity: 0; border-width: 0px; }
}

/* 2. 爆炸 (Explosion) */
.vfx-boss-explosion {
    width: 200px; height: 200px;
    background: radial-gradient(circle, #fff 0%, transparent 70%); /* JS 會覆蓋顏色 */
    border-radius: 50%;
    filter: blur(2px);
    animation: bossExplosionAnim 0.6s ease-out forwards;
}

@keyframes bossExplosionAnim {
    0% { transform: translate(-50%, -50%) scale(0.1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* 3. 風暴 (Storm) */
.vfx-boss-storm {
    width: 250px; height: 250px;
    border-radius: 50%;
    border: 2px dashed #fff; /* JS 會覆蓋顏色 */
    animation: bossStormAnim 1s linear forwards;
}

@keyframes bossStormAnim {
    0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.5); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(360deg) scale(1.2); opacity: 0; }
}

/* 4. 旋風斬 (Slash Spin) */
.vfx-boss-slash-spin {
    width: 200px; height: 200px;
    border: 4px solid transparent;
    border-top-color: inherit; /* 吃 JS 設定的顏色 */
    border-bottom-color: inherit;
    border-radius: 50%;
    animation: bossSpinAnim 0.5s ease-out forwards;
}

@keyframes bossSpinAnim {
    0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.1); opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(720deg) scale(1.5); opacity: 0; }
}

/* 關卡與難度按鈕的鎖定狀態 */
.level-btn.locked,
.difficulty-btn.locked {
    opacity: 0.5;
    filter: grayscale(100%);
    cursor: not-allowed !important;
    position: relative;
    pointer-events: none; /* 禁止點擊 */
}

/* 鎖頭圖示 (覆蓋在按鈕上) */
.level-btn.locked::after,
.difficulty-btn.locked::after {
    content: "🔒";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    text-shadow: 0 0 5px black;
    z-index: 10;
}

.difficulty-btn.locked::after {
    font-size: 1.2em; /* 難度按鈕較小，鎖頭縮小 */
}

/* 通知紅點 */
#notification-btn {
    position: relative; /* 讓紅點可以絕對定位 */
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #e74c3c;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.75em;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 10;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.notification-badge.hidden {
    display: none;
}

/* 騎兵專屬：綠色底色 */
.hero-type-badge.cavalry {
    background-color: #27ae60; /* 翡翠綠 */
    box-shadow: 0 0 5px #2ecc71;
}

/* 確保所有戰鬥單位預設垂直置中且面向右 */
.hero-unit, .enemy-unit {
    transform: translateY(-50%) scaleX(1);
    transform-origin: center center; /* 確保翻轉時以中心為軸 */
    transition: transform 0.1s linear; /* 增加一點轉向的平滑感 */
}

/* 當單位需要面向左時，套用此 class */
.unit-flipped {
    transform: translateY(-50%) scaleX(-1) !important;
}

/* 🔥 關鍵修正：當父層被翻轉時，把內部的血條、氣力條、兵種圖示「翻回來」(負負得正) */
/* 修正重點：
   1. transform: translateX(-50%) -> 維持置中
   2. scaleX(-1) -> 抵銷父層鏡像，確保血條方向正確
*/
.unit-flipped .hero-hp-bar,
.unit-flipped .enemy-hp-bar,
.unit-flipped .hero-mana-bar {
    transform: translateX(-50%) scaleX(-1) !important;
}

/* 兵種圖示不需要置中修正 (因為它是定位在角落的)，只需抵銷翻轉 */
.unit-flipped .hero-type-badge {
    transform: scaleX(-1);
}

/* =========================================
   🏰 領地系統樣式 (新增)
   ========================================= */

.territory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    padding: 10px;
}

.building-card {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #7f8c8d;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    transition: transform 0.2s;
}

.building-card:hover {
    border-color: #27ae60;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(39, 174, 96, 0.2);
}

.building-card.castle { border-color: #f1c40f; }
.building-card.farm { border-color: #f39c12; }
.building-card.mine { border-color: #95a5a6; }
.building-card.warehouse { border-color: #3498db; }

.build-info {
    flex: 1;
}

.build-name {
    font-size: 1.2em;
    font-weight: bold;
    color: #ecf0f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.build-lv {
    font-size: 0.8em;
    background: #27ae60;
    padding: 2px 6px;
    border-radius: 4px;
}

.build-desc {
    font-size: 0.85em;
    color: #bdc3c7;
    margin: 5px 0 10px 0;
    min-height: 2.5em; /* 保持高度一致 */
}

.build-stat {
    background: rgba(255, 255, 255, 0.1);
    padding: 5px;
    border-radius: 4px;
    font-size: 0.9em;
    color: #f1c40f;
    margin-bottom: 10px;
}

.build-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: auto;
}

.btn-upgrade-build {
    background: #e67e22;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9em;
    transition: 0.2s;
}

.btn-upgrade-build:hover {
    background: #d35400;
}

.claim-btn {
    background: #27ae60;
    width: 100%;
    margin: 0 0 5px 0;
    padding: 8px;
    font-size: 0.9em;
}

.claim-btn.disabled {
    background: #7f8c8d;
    opacity: 0.6;
    pointer-events: none;
}

/* 建造進度條 */
.build-progress-bar {
    height: 6px;
    background: #333;
    border-radius: 3px;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
}

.build-progress-bar .fill {
    height: 100%;
    background: #3498db;
    animation: progressStripes 1s linear infinite;
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 20px 20px;
}

.timer-text {
    position: absolute;
    top: -20px;
    right: 0;
    font-size: 0.8em;
    color: #3498db;
    font-weight: bold;
}

@keyframes progressStripes {
    from { background-position: 20px 0; }
    to { background-position: 0 0; }
}

/* style.css 新增部分 - 冒險模式 */

#adventure-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh; /* 🔥 改為 100dvh (Dynamic Viewport Height)，自動扣除瀏覽器工具列高度 */
    background-color: #000;
    z-index: 3000; /* 比一般戰鬥畫面更高 */
    overflow: hidden;
    /* 🔥 關鍵：禁止瀏覽器預設的觸控行為 (如雙擊縮放、滑動翻頁) */
    touch-action: none; 
    /* 🔥 關鍵：禁止 iOS Safari 的橡皮筋迴彈效果 */
    overscroll-behavior: none; 
}

#adv-canvas {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #333; /* 暫時背景色 */
}

#adv-ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 讓點擊穿透到 Canvas (除非點到按鈕) */
    padding: 20px;
    box-sizing: border-box;
}

.adv-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.adv-player-info {
    display: flex;
    gap: 10px;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 10px;
    pointer-events: auto;
}

.adv-avatar {
    width: 50px;
    height: 50px;
    background: #555;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
}

.adv-bars {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 150px;
}

.adv-hp-bar, .adv-mp-bar {
    width: 100%;
    height: 10px;
    background: #333;
    border-radius: 5px;
    border: 1px solid #fff;
    overflow: hidden;
}

.adv-hp-bar div { background: #e74c3c; height: 100%; }
.adv-mp-bar div { background: #3498db; height: 100%; }

#adv-exit-btn {
    pointer-events: auto; /* 讓按鈕可點擊 */
}

.adv-controls-hint {
    position: absolute;
    /* bottom: 20px; 移除舊的 */
    top: 80px; /* 🔥 改到左上角 (血條下方) */
    left: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-family: monospace;
    background: rgba(0,0,0,0.5);
    padding: 10px;
    border-radius: 5px;
    pointer-events: none; /* 防止遮擋操作 */
}

/* style.css 新增技能列樣式 */

#adv-skill-bar-container {
    position: absolute;
    bottom: calc(20px + env(safe-area-inset-bottom)); /* 🔥 自動加上安全區域距離 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    background: rgba(0, 0, 0, 0.6);
    padding: 8px 15px; /* 🔥 增加 padding */
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    pointer-events: auto; /* 讓按鈕可點擊 */
    z-index: 9000; /* 🔥 確保在搖桿之下或不干擾 */
}

.adv-skill-slot {
    width: 60px;
    height: 60px;
    position: relative;
    border: 2px solid #aaa;
    border-radius: 8px;
    background: #222;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.1s;
}

.adv-skill-slot:active {
    transform: scale(0.95);
}

.adv-skill-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 冷卻遮罩 */
.adv-skill-cooldown {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 高度會由 JS 控制變化 */
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 1.2em;
    transition: height 0.1s linear;
}

.adv-skill-slot.ready {
    border-color: #f1c40f;
    box-shadow: 0 0 10px #f1c40f;
}

/* style.css - 虛擬搖桿樣式 (修正版) */

#virtual-joystick-zone {
    position: absolute;
    bottom: calc(120px + env(safe-area-inset-bottom)); /* 🔥 自動加上安全區域距離 */
    left: 40px;    /* 🔥 稍微調整 */
    width: 120px;
    height: 120px;
    z-index: 9999; /* 🔥 加高層級，確保在最上層 */
    touch-action: none; 
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto; /* 🔥 關鍵！這行讓搖桿可以被觸摸，不受父層影響 */
}

#joystick-base {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.15); /* 稍微亮一點 */
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    position: relative;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

#joystick-stick {
    width: 50px;
    height: 50px;
    background: radial-gradient(circleAt 30% 30%, #f1c40f, #f39c12); /* 漸層質感 */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 6px rgba(0,0,0,0.4);
    pointer-events: none;
}

/* style.css - 修正後的冒險模式整裝介面 */

/* 佈局容器 */
.prep-container {
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 10px;
}

/* 左側：英雄面板 */
.prep-hero-panel {
    flex: 1;
    background: #34495e;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.prep-hero-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: rgba(0,0,0,0.3);
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}
.prep-hero-preview:hover {
    background: rgba(255,255,255,0.1);
}

/* ------------------------------------------------ */
/* 🔥 修正區塊開始：已裝備欄位 (左側) 改回正方形 */
/* ------------------------------------------------ */

/* 裝備網格：改回 3 欄，比較節省空間且美觀 */
.prep-equip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 🔥 3欄排列 */
    gap: 12px;
    margin-bottom: 20px;
    justify-items: center; /* 水平置中 */
}

/* 單個裝備格子：強制正方形 */
.equip-slot {
    width: 90px !important;  /* 🔥 固定寬度 */
    height: 90px !important; /* 🔥 固定高度 = 正方形 */
    aspect-ratio: 1 / 1;     /* 確保比例 */
    
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #555;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
    
    /* 內容置中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
}

/* 選中時的效果 */
.equip-slot.selected {
    border-color: #f1c40f;
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
    transform: scale(1.05);
}

.equip-slot:hover {
    border-color: #ddd;
    background: rgba(255, 255, 255, 0.1);
}

/* 格子內的圖片 */
.equip-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持比例填滿 */
    padding: 5px; 
    box-sizing: border-box;
    z-index: 1;
}

/* 格子內的標籤文字 (例如：武器、頭盔...) */
.slot-label {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 10px;
    background: rgba(0,0,0,0.7); /* 半透明黑底 */
    padding: 2px 0;
    z-index: 2;
    pointer-events: none; /* 讓點擊穿透文字 */
    white-space: nowrap;  /* 不換行 */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 如果 prep.js 不小心生成了詳細資訊結構 (equip-details)，強制隱藏它，保持格子整潔 */
.equip-slot .equip-details,
.equip-slot .equip-img-box {
    display: none !important;
}

/* ------------------------------------------------ */
/* 🔥 修正區塊結束 */
/* ------------------------------------------------ */

/* 🔥 3. 圖片區域：保持正方形 WebP */
.equip-img-box {
    width: 100%;
    aspect-ratio: 1; /* 強制正方形 */
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    margin-bottom: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.equip-img-box img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

/* 🔥 4. 詳細數值區域 */
.equip-details {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.equip-name {
    font-size: 0.9em;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 2px;
}

.equip-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.75em;
    color: #ddd;
    line-height: 1.4;
}

.equip-stat-val {
    color: #f1c40f;
    font-weight: bold;
}

/* 物品槽 */
.prep-card-slots, .prep-item-slots {
    display: flex;
    gap: 5px;
    justify-content: center;
}
.item-slot {
    width: 40px; height: 40px;
    border: 1px dashed #777;
    background: rgba(0,0,0,0.2);
    display: flex; justify-content: center; align-items: center;
    border-radius: 4px;
    font-size: 0.8em; color: #555;
}

/* 右側：動作面板 */
.prep-action-panel {
    flex: 2;
    background: #2c3e50;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    border: 1px solid #555;
}

/* 分頁按鈕 */
.prep-tabs {
    display: flex;
    border-bottom: 1px solid #555;
}
.prep-tab-btn {
    flex: 1;
    background: #34495e;
    border: none;
    padding: 10px;
    color: #aaa;
    cursor: pointer;
    font-weight: bold;
    border-right: 1px solid #555;
}
.prep-tab-btn.active {
    background: #e67e22;
    color: white;
}
.prep-tab-btn:hover:not(.active) {
    background: #3e5871;
}

/* 分頁內容 */
.prep-tab-content {
    display: none; /* 預設隱藏 */
    flex: 1;
    padding: 10px;
    overflow-y: auto;
}
.prep-tab-content.active {
    display: block; /* 顯示選中的 */
}

/* 🔥 1. 修改裝備列表網格：加大寬度，自適應排列 */
.prep-grid-list {
    display: grid;
    /* 每個格子最小 140px，最大平分空間 (變成寬長方形) */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
    gap: 12px;
    padding: 10px;
    max-height: 500px;
    overflow-y: auto;
}

/* 商店與關卡樣式 */
.shop-grid, .level-select-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.shop-item {
    background: rgba(255,255,255,0.05);
    border: 1px solid #555;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}
.shop-icon { font-size: 2em; margin-bottom: 5px; }

.prep-level-btn {
    background: #34495e;
    color: white;
    border: 2px solid #777;
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
}
.prep-level-btn.selected {
    border-color: #f1c40f;
    background: rgba(241, 196, 15, 0.1);
}
.prep-level-btn.locked {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(1);
}

/* 手機版適配 */
@media (max-width: 768px) {
    #adv-skill-bar-container {
        bottom: calc(10px + env(safe-area-inset-bottom)); /* 技能列貼底，避開橫條 */
        transform: translateX(-50%) scale(0.85);
        padding: 5px;
        gap: 5px;
    }
    .adv-skill-slot {
        width: 50px; /* 卡片稍微縮小 */
        height: 50px;
    }
    #virtual-joystick-zone {
        bottom: calc(150px + env(safe-area-inset-bottom)); /* 🔥 手機上再高一點，避免跟手機底部手勢衝突 */
        left: 30px;
    }
    /* 整裝介面手機版 */
    .prep-container {
        flex-direction: column; /* 改為上下排列 */
        overflow-y: auto; /* 整個容器捲動 */
    }
    .prep-hero-panel {
        flex: none; /* 高度自適應 */
    }
    .prep-action-panel {
        flex: 1;
        min-height: 300px;
    }
}

/* --- style.css 新增或修改 --- */

/* 裝備列表容器：維持 Grid 佈局 */
#prep-equip-list {
    display: grid;
    /* 自動填滿，最小寬度 160px，確保手機版也不會太擠 */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); 
    gap: 12px;
    padding: 10px;
}

/* 單個裝備卡片：固定高度與樣式 */
.equip-card {
    position: relative;
    background: linear-gradient(180deg, rgba(44, 62, 80, 0.9) 0%, rgba(0, 0, 0, 0.95) 100%);
    border: 2px solid #555;
    border-radius: 8px;
    height: 220px; /* 🔥 關鍵：強制固定高度，不管內容多寡 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.2s;
}

.equip-card:active {
    transform: scale(0.98);
}

.equip-card.selected {
    box-shadow: 0 0 0 3px #f1c40f, 0 0 15px rgba(241, 196, 15, 0.5);
    border-color: #f1c40f;
}

/* 頂部：稀有度條與名稱 */
.equip-header {
    padding: 8px 5px;
    text-align: center;
    font-weight: bold;
    font-size: 0.95em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 圖片區域 */
.equip-img-container {
    height: 100px; /* 固定圖片區高度 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0) 70%);
    margin: 5px;
}

.equip-img-container img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

/* 數值區域：使用 Grid 排列兩欄 */
.equip-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 左右兩欄 */
    gap: 4px 8px;
    padding: 8px;
    font-size: 0.8em;
    color: #ccc;
    background: rgba(0, 0, 0, 0.3);
    flex-grow: 0; /* 不自動伸展，由內容決定 */
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-label { color: #aaa; font-size: 0.9em; }
.stat-val { font-weight: bold; color: #fff; }
.stat-val.highlight { color: #f1c40f; } /* 特殊數值亮色 */
.stat-val.debuff { color: #e74c3c; }    /* 負面效果紅色 */

/* 描述區域：填滿剩餘空間 */
/* 確保描述文字 (如果有) 字體夠小且不佔太多空間 */
.equip-desc {
    padding: 5px 8px; /* 稍微縮小內距 */
    font-size: 0.7em; /* 字體再小一點 */
    color: #888;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 最多只顯示 2 行 */
    -webkit-box-orient: vertical;
    border-top: 1px solid rgba(255,255,255,0.05);
    /* 移除 flex-grow，讓它自然貼底，不強制撐開 */
    background: rgba(0,0,0,0.2);
}

/* 稀有度顏色標籤 (JS 會動態加入 class) */
.rarity-SSR { border-color: #f1c40f !important; box-shadow: inset 0 0 10px rgba(241, 196, 15, 0.2); }
.rarity-SR { border-color: #9b59b6 !important; }
.rarity-R { border-color: #3498db !important; }

/* --- style.css (手機版整裝介面與滾動修正) --- */

/* 1. 用來鎖定背景滾動的 Class (給 JS 用) */
body.no-scroll {
    /* 🔥 修正：使用 fixed 才能在 iOS 真正鎖住背景 */
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* ❌ 刪除 touch-action: none，不然連彈窗都滑不動 */
}

/* 2. 手機版佈局深度優化 */
@media (max-width: 768px) {
    /* 調整彈窗本體大小 */
    .modal-content {
        width: 95% !important;
        /* 使用 dvh (動態高度) 避免被網址列遮擋 */
        height: 90dvh !important; 
        max-height: 90dvh !important;
        padding: 10px !important;
        display: flex;
        flex-direction: column;
        /* 確保彈窗本身不會溢出 */
        overflow: hidden !important; 
    }

    /* 整裝介面容器：這是真正負責「上下捲動」的地方 */
    .prep-container {
        display: flex;
        flex-direction: column;
        flex: 1;           /* 填滿剩餘空間 */
        
        /* 🔥 關鍵：讓這個容器可以捲動 */
        overflow-y: auto !important; 
        overflow-x: hidden;
        
        /* 🔥 iOS 慣性捲動必備 */
        -webkit-overflow-scrolling: touch; 
        
        /* 🔥 防止滾動穿透到背景 */
        overscroll-behavior: contain; 
        
        min-height: 0;
        gap: 15px;
        padding-bottom: 40px; /* 底部多留白，避免被手機橫條擋住 */
    }

    /* 上半部：英雄面板 */
    .prep-hero-panel {
        flex: none; 
        width: 100%;
        margin-bottom: 0;
        /* 讓英雄面板內部如果是長內容也可以自己滑 */
        max-height: 40vh; 
        overflow-y: auto;
    }

    /* 下半部：動作面板 (分頁與背包) */
    .prep-action-panel {
        flex: none; 
        /* 讓它有足夠高度顯示內容，不被壓縮 */
        min-height: 600px; 
        display: flex;
        flex-direction: column;
    }

    /* 內部的列表：取消原本的捲動限制，交給外層 .prep-container 統一捲動 */
    .prep-grid-list, .shop-grid, .level-select-grid {
        max-height: none !important;
        overflow-y: visible !important;
        flex: 1;
    }
    
    .prep-tab-content {
        overflow: visible !important;
        flex: 1;
    }

    /* 裝備卡片高度適度縮小 */
    .equip-card {
        height: 200px;
    }
}

/* --- style.css 新增/修改 --- */

/* 🔥 強制禁止畫布與 UI 層的觸控預設行為 (解決雙擊放大、拖曳滾動) */
#adv-canvas, 
#adv-ui-layer, 
#virtual-joystick-zone,
.game-container {
    touch-action: none !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* 確保 UI 層在最上面，且不會阻擋事件 (按鈕除外) */
#adv-ui-layer {
    pointer-events: none; /*讓點擊穿透 UI 層，直接點到 Canvas 或搖桿 */
}

/* 但 UI 內部的按鈕要可以點 */
#adv-ui-layer > * {
    pointer-events: auto;
}

/* 確保切換按鈕在搖桿之上 */
#adv-target-btn {
    z-index: 20000 !important; /* 超高層級 */
}

/* --- 抽卡結果視窗優化 (Grid 版) --- */

/* 1. 調整容器佈局 */
.gacha-result-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 15px; /* 卡片間距 */
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 10px;
    max-height: 70vh; /* 避免超出視窗 */
    overflow-y: auto; /* 超出則捲動 */
}

/* 2. 抽卡結果的卡片樣式調整 (使用標準 .card 但微調) */
.gacha-result-grid .card {
    /* 這裡繼承了標準 .card 的樣式，所以大小會是 120x180 */
    position: relative; /* 確保內部定位正常 */
    transform-style: preserve-3d;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.gacha-result-grid .card:hover {
    transform: translateY(-5px) scale(1.05);
    z-index: 10;
    box-shadow: 0 10px 25px rgba(0,0,0,0.8);
}

/* 3. 確保詳情視窗永遠在抽卡結果之上 */
#detail-modal {
    z-index: 99999 !important; /* 強制最高 */
}

#gacha-reveal-modal {
    z-index: 2000 !important; /* 比一般彈窗高，但比詳情低 */
}

/* 4. 手機版適配 */
@media (max-width: 600px) {
    .gacha-result-grid {
        gap: 8px; /* 手機上間距縮小 */
    }
    .gacha-result-grid .card {
        width: 90px;  /* 稍微縮小以容納更多 */
        height: 135px;
    }
}

/* --- 排行榜視窗與工作室 Logo 樣式 --- */

/* 確保排行榜列表有足夠空間與捲軸 */
#leaderboard-list {
    min-height: 150px;
    max-height: 300px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.2); /* 稍微深一點的背景區隔 */
    border-radius: 8px;
    margin-bottom: 10px;
}

/* 列表項目優化 */
#leaderboard-list div {
    transition: background 0.2s;
}
#leaderboard-list div:hover {
    background: rgba(255, 255, 255, 0.05); /* 滑鼠懸停效果 */
}

/* 工作室 Logo 容器 */
.studio-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 15px;
    margin-top: auto; /* 推到底部 */
}

/* Logo 圖片樣式 */
#studio-logo {
    width: 140px;       /* 設定適當寬度 */
    height: auto;       /* 維持比例 */
    margin-bottom: 5px;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5)); /* 陰影讓 Logo 更立體 */
    opacity: 0.9;
    transition: all 0.3s ease;
}

/* Logo 滑鼠互動特效 */
#studio-logo:hover {
    opacity: 1;
    transform: scale(1.05); /* 輕微放大 */
    filter: drop-shadow(0 0 8px rgba(241, 196, 15, 0.5)); /* 發光效果 */
}

/* 排行榜按鈕特別樣式 (讓它在按鈕群中顯眼一點) */
#leaderboard-btn {
    box-shadow: 0 0 5px rgba(241, 196, 15, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
#leaderboard-btn:hover {
    background-color: #f39c12 !important;
    transform: translateY(-2px);
}

/* =========================================
   修正補丁 (Logo放大 + iOS捲動修復)
   ========================================= */

/* --- 1. 工作室 Logo 與文字放大 --- */

/* 覆蓋舊的 Logo 設定，將寬度加大 */
#studio-logo {
    width: 220px !important;  /* 從 140px 改為 220px */
    height: auto;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
    opacity: 0.9;
    transition: all 0.3s ease;
}

/* 放大下方的文字 */
.studio-logo-container div {
    font-size: 1.1em !important; /* 從 0.8em 改為 1.1em */
    color: #bdc3c7;
    margin-top: 5px;
    font-weight: bold;
    letter-spacing: 1px;
}

/* --- 2. iOS 手機版 PVP 列表捲動修復 --- */

/* 強制針對 PVP 視窗開啟 iOS 的慣性捲動 */
#pvp-arena-modal .modal-content {
    /* 強制覆蓋行內樣式，確保 iOS 能夠滑動 */
    overflow-y: scroll !important; 
    -webkit-overflow-scrolling: touch !important; /* iOS 關鍵屬性：慣性捲動 */
    
    /* 增加底部留白，避免手機瀏覽器的工具列擋住最後一個對手 */
    padding-bottom: 80px !important; 
}

/* 確保列表容器本身不會限制高度，讓外層視窗負責捲動 */
.opponent-list-container {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 20px;
}

/* --- 排行榜視窗與工作室 Logo 樣式 --- */

/* 確保排行榜列表有足夠空間與捲軸 */
#leaderboard-list {
    min-height: 150px;
    max-height: 300px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.2); /* 稍微深一點的背景區隔 */
    border-radius: 8px;
    margin-bottom: 10px;
}

/* 列表項目優化 */
#leaderboard-list div {
    transition: background 0.2s;
}
#leaderboard-list div:hover {
    background: rgba(255, 255, 255, 0.05); /* 滑鼠懸停效果 */
}

/* 工作室 Logo 容器 */
.studio-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 15px;
    margin-top: auto; /* 推到底部 */
}

/* Logo 圖片樣式 - 放大版 */
#studio-logo {
    width: 220px !important;       /* 加大寬度 */
    height: auto;       
    margin-bottom: 5px;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5)); 
    opacity: 0.9;
    transition: all 0.3s ease;
}

/* Logo 滑鼠互動特效 */
#studio-logo:hover {
    opacity: 1;
    transform: scale(1.05); 
    filter: drop-shadow(0 0 8px rgba(241, 196, 15, 0.5)); 
}

/* 工作室文字放大 */
.studio-logo-container div {
    font-size: 1.1em !important; /* 加大文字 */
    color: #bdc3c7;
    margin-top: 5px;
    font-weight: bold;
    letter-spacing: 1px;
}

/* 排行榜按鈕特別樣式 (讓它在按鈕群中顯眼一點) */
#leaderboard-btn {
    box-shadow: 0 0 5px rgba(241, 196, 15, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
#leaderboard-btn:hover {
    background-color: #f39c12 !important;
    transform: translateY(-2px);
}

/* --- iOS 手機版 PVP 列表捲動修復 --- */

/* 強制針對 PVP 視窗開啟 iOS 的慣性捲動 */
#pvp-arena-modal .modal-content {
    /* 強制覆蓋行內樣式，確保 iOS 能夠滑動 */
    overflow-y: scroll !important; 
    -webkit-overflow-scrolling: touch !important; /* iOS 關鍵屬性：慣性捲動 */
    
    /* 增加底部留白，避免手機瀏覽器的工具列擋住最後一個對手 */
    padding-bottom: 80px !important; 
}

/* 確保列表容器本身不會限制高度，讓外層視窗負責捲動 */
.opponent-list-container {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 20px;
}

/* --- iOS 手機版 PVP 列表捲動修復 (請補在 style.css 最下面) --- */

/* 強制針對 PVP 視窗開啟 iOS 的慣性捲動 */
#pvp-arena-modal .modal-content {
    /* 強制覆蓋行內樣式，確保 iOS 能夠滑動 */
    overflow-y: scroll !important; 
    -webkit-overflow-scrolling: touch !important; /* iOS 關鍵屬性：慣性捲動 */
    
    /* 增加底部留白，避免手機瀏覽器的工具列擋住最後一個對手 */
    padding-bottom: 80px !important; 
}

/* 確保列表容器本身不會限制高度，讓外層視窗負責捲動 */
.opponent-list-container {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 20px;
}

/* =========================================
   最終修正：Logo 特大化 + iOS 捲動修復
   (請複製這整段，貼在 style.css 的最下面)
   ========================================= */

/* 1. 排行榜視窗變寬，以容納特大 Logo */
#leaderboard-modal .modal-content {
    max-width: 600px !important; /* 原本 400px 太窄，強制改寬 */
}

/* 2. Logo 變更為 2.5 倍大 (220px -> 550px) */
#studio-logo {
    width: 550px !important;      /* 設定為目標大小 */
    max-width: 90%;               /* 手機版不要超出螢幕，留點邊距 */
    height: auto;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
    opacity: 0.9;
    transition: all 0.3s ease;
}

/* 3. 文字也稍微加大配合巨型 Logo */
.studio-logo-container div {
    font-size: 1.3em !important;
    color: #bdc3c7;
    margin-top: 5px;
    font-weight: bold;
    letter-spacing: 1px;
}

/* 4. iOS 手機版 PVP 列表捲動修復 (上次漏掉的) */
#pvp-arena-modal .modal-content {
    overflow-y: scroll !important; 
    -webkit-overflow-scrolling: touch !important; /* iOS 慣性滑動關鍵 */
    padding-bottom: 80px !important; 
}

.opponent-list-container {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 20px;
}