/* ============================================================
   MU放置 - 奇迹风格（深蓝金配色，基于 mir2-idle-game 布局）
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Microsoft YaHei', sans-serif; background: #0d0d18; color: #e0e0e0; min-height: 100vh; }
#app { width: 100%; min-height: 100vh; }

/* 职业选择 */
.char-select { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.char-name-box { width: 340px; margin-bottom: 24px; text-align: center; }
.char-name-box input { width: 100%; padding: 10px 14px; background: #0a0a12; border: 1px solid #333; border-radius: 6px; color: #e0e0e0; font-size: 1em; text-align: center; }
.char-name-box input:focus { border-color: #4fc3f7; outline: none; }
.char-select h1 { font-size: 3em; color: #ffd700; text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); margin-bottom: 10px; letter-spacing: 4px; }
.subtitle { color: #888; margin-bottom: 40px; }
.job-cards { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; }
.job-card { background: #141428; border: 2px solid #2a2a50; border-radius: 12px; padding: 30px; width: 240px; text-align: center; cursor: pointer; transition: all 0.3s; }
.job-card:hover { border-color: #ffd700; transform: translateY(-5px); box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2); }
.job-icon { font-size: 3em; margin-bottom: 10px; }
.job-card h3 { color: #ffd700; margin-bottom: 8px; }
.job-card p { font-size: 0.9em; color: #aaa; margin-bottom: 8px; }
.job-card small { color: #4fc3f7; display: block; line-height: 1.6; }

/* 游戏布局 */
.game-layout { display: flex; flex-direction: column; height: 100vh; }
.game-header { display: flex; align-items: center; gap: 20px; padding: 10px 20px; background: #141428; border-bottom: 1px solid #2a2a50; flex-wrap: wrap; }
.qq-group { color: #ffd740; font-size: 0.85em; letter-spacing: 1px; text-shadow: 0 0 8px rgba(255, 215, 64, 0.35); }
.player-name { font-weight: bold; color: #ffd700; font-size: 1.1em; }
.player-job { color: #b388ff; font-size: 0.85em; }
.gold { color: #ffd700; }
.kills { color: #ef5350; }
.btn-small { padding: 4px 10px; font-size: 0.8em; border: none; border-radius: 4px; cursor: pointer; }
.btn-danger { background: #c62828; color: white; }
.btn-danger:hover { background: #e53935; }

.main-content { display: grid; grid-template-columns: 340px 1fr 360px; gap: 10px; padding: 10px; flex: 1; overflow: hidden; }
.left-panel, .right-panel { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.center-panel { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }

.panel { background: #141428; border: 1px solid #2a2a50; border-radius: 8px; padding: 12px; }
.panel h3 { color: #4fc3f7; font-size: 0.95em; margin-bottom: 10px; border-bottom: 1px solid #2a2a50; padding-bottom: 6px; }
.panel h3 small { color: #888; font-weight: normal; }

/* 属性条 */
.bar-group { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bar-group label { width: 30px; font-size: 0.8em; color: #aaa; }
.bar { position: relative; height: 20px; background: #0a0a12; border-radius: 10px; flex: 1; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 10px; transition: width 0.3s; }
.bar span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.7em; color: white; text-shadow: 0 1px 2px black; white-space: nowrap; }
.hp-bar .bar-fill { background: linear-gradient(90deg, #c62828, #ef5350); }
.mp-bar .bar-fill { background: linear-gradient(90deg, #1565c0, #42a5f5); }
.exp-bar .bar-fill { background: linear-gradient(90deg, #f9a825, #ffee58); }
.monster-hp-bar .bar-fill { background: linear-gradient(90deg, #4a148c, #ab47bc); }
.monster-hp-bar { height: 24px; }

/* 属性加点 */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 0.8em; color: #ccc; margin-top: 8px; }
.stat-row { display: flex; align-items: center; gap: 4px; background: #0d0d1a; padding: 4px 6px; border-radius: 4px; }
.stat-row .stat-name { color: #8fc8ff; width: 30px; }
.stat-row .stat-val { color: #ffd700; font-weight: bold; flex: 1; text-align: right; }
.stat-input { width: 52px; flex: 0 0 52px; padding: 2px 4px; border-radius: 3px; border: 1px solid #37474f; background: #10222f; color: #ffd700; font-weight: bold; font-size: 1em; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.stat-input::-webkit-outer-spin-button, .stat-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stat-input:focus { border-color: #4fc3f7; outline: none; }
.points-left { color: #ffd740; font-weight: bold; }
/* v120：自填数值加点的操作行与预览区（确认加点/预览/清空 + 已填合计，预览行只就地写入 #alloc-msg 不重绘面板） */
.alloc-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 0.8em; color: #b0bec5; }
.alloc-sum { flex: 1; min-width: 120px; }
.alloc-total { color: #ffd740; }
.alloc-total.alloc-over { color: #ff6e6e; }
.alloc-msg { font-size: 0.75em; color: #90a4ae; margin-top: 4px; }
.alloc-msg .pv-title { color: #4fc3f7; margin-bottom: 2px; }
.alloc-msg .pv-row { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.alloc-msg .pv-k { color: #8fc8ff; }
.alloc-msg .pv-v { color: #e0e0e0; }
.alloc-msg .pv-up { color: #81c784; font-style: normal; margin-left: 4px; }
.alloc-msg .pv-down { color: #ff6e6e; font-style: normal; margin-left: 4px; }
.alloc-msg .alloc-ok { color: #81c784; margin-left: 6px; }
.alloc-msg .alloc-warn { color: #ffb74d; margin-left: 6px; }

.skill-panel { font-size: 0.8em; margin-top: 8px; color: #aaa; }
.skill-panel strong { color: #4fc3f7; }
.skill-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.skill-slot { padding: 3px 8px; border-radius: 4px; font-size: 0.9em; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.skill-slot.filled { background: #1a237e; color: #82b1ff; border: 1px solid #3949ab; }
.skill-slot.filled small { color: #69f0ae; font-size: 0.8em; margin-left: 2px; }
.skill-slot .cd-ready { color: #ffd740; }
.skill-slot .cd-wait { color: #78909c; }
.skill-slot.empty { background: #263238; color: #555; border: 1px dashed #444; }
.skill-learned { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.skill-learned small { color: #777; }
.btn-skill-on { background: #1b5e20; color: #a5d6a7; border: 1px solid #2e7d32; border-radius: 4px; padding: 2px 6px; cursor: pointer; font-size: 0.85em; }
.btn-skill-on:disabled { background: #333; color: #666; border-color: #444; cursor: not-allowed; }
.btn-skill-on:hover { background: #2e7d32; color: #fff; }
.btn-skill-forget { background: #b71c1c; color: #ef9a9a; border: 1px solid #d32f2f; border-radius: 4px; padding: 2px 5px; cursor: pointer; font-size: 0.8em; }
.btn-skill-forget:hover { background: #d32f2f; color: #fff; }

/* 装备 */
.equip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.equip-slot { background: #0a0a12; border: 1px solid #333; border-radius: 4px; padding: 6px; text-align: center; font-size: 0.75em; }
.equip-slot small { display: block; color: #666; margin-bottom: 2px; }
.equip-slot.equipped { border-color: #4fc3f7; }
.equip-slot.equipped span { color: #4fc3f7; }
.equip-slot .ex-name { color: #00e676; }
.equip-slot .lvl-tag { color: #4fc3f7; font-weight: bold; }
.equip-slot .opt-tag { color: #40c4ff; }
.equip-slot .luck-tag-inline { color: #ffd54f; }

/* 地图 */
.map-select { width: 100%; padding: 8px; background: #0a0a12; color: #e0e0e0; border: 1px solid #333; border-radius: 4px; font-size: 0.9em; }
.map-select option:disabled { color: #666; }
.map-info { display: flex; gap: 12px; margin-top: 8px; padding: 6px 10px; background: #0d1a2a; border-radius: 4px; border: 1px solid #1a3050; flex-wrap: wrap; }
.map-info .info-item { font-size: 0.8em; color: #8fc8ff; white-space: nowrap; }

/* 战斗 */
.monster-info { text-align: center; margin-bottom: 12px; }
.monster-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 10px; max-height: 400px; overflow-y: auto; }
.monster-card { padding: 4px 8px; border-radius: 6px; background: #1a1a2e; border: 1px solid #333; cursor: pointer; transition: all 0.15s; }
.monster-card:hover { border-color: #4fc3f7; }
.monster-card.target { border-color: #ff9800; background: #2a1f0a; box-shadow: 0 0 6px rgba(255,152,0,0.3); }
.monster-card.boss { border-left: 3px solid #ff5722; }
.monster-card.elite { border-left: 3px solid #ffd700; }
.monster-card.dead { opacity: 0.4; filter: grayscale(0.9); pointer-events: none; cursor: default; }
.monster-name { font-size: 0.9em; font-weight: bold; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monster-name.boss { color: #ff5722; text-shadow: 0 0 10px rgba(255, 87, 34, 0.5); }
.monster-name.elite { color: #ffd700; }
.monster-sub { font-size: 0.72em; color: #888; }
.no-monster { text-align: center; color: #666; padding: 20px; }

.combat-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wave-info { font-size: 0.85em; color: #4fc3f7; font-weight: bold; white-space: nowrap; }
.btn { padding: 10px; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9em; font-weight: bold; transition: all 0.2s; }
.btn:hover { transform: scale(1.02); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-idle { background: #2e7d32; color: white; }
.btn-idle:hover { background: #43a047; }
.btn-stop { background: #e65100; color: white; }
.btn-stop:hover { background: #f57c00; }
.btn-potion { background: #1565c0; color: white; font-size: 0.8em; }
.btn-potion:hover { background: #1976d2; }
.pot-cfg { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8em; color: #b0bec5; white-space: nowrap; }
.inp-threshold { width: 44px; padding: 5px 3px; border-radius: 4px; background: #1a2332; color: #e0e0e0; border: 1px solid #37474f; font-size: 0.9em; text-align: center; }
.btn-autopot-on { background: #00897b; color: white; border: none; border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 0.8em; }
.btn-autopot-off { background: #546e7a; color: #ccc; border: none; border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 0.8em; }
.player-status { display: flex; gap: 6px; justify-content: center; margin-top: 6px; min-height: 20px; flex-wrap: wrap; }
.status-buff { padding: 2px 8px; border-radius: 4px; font-size: 0.75em; }
.status-heal { background: #1b5e20; color: #69f0ae; border: 1px solid #4caf50; }
.status-dead { background: #b71c1c; color: #ffcdd2; border: 1px solid #d32f2f; animation: blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.6} }

/* 日志 */
.log-list { max-height: 200px; overflow-y: auto; font-size: 0.78em; }
.log-item { padding: 2px 0; border-bottom: 1px solid #0a0a12; }
.log-attack { color: #ef5350; }
.log-hurt { color: #ff9800; }
.log-kill { color: #66bb6a; }
.log-drop { color: #ffd700; }
.log-level { color: #4fc3f7; font-weight: bold; }
.log-heal { color: #69f0ae; }
.log-death { color: #ff1744; font-weight: bold; }
.log-info { color: #90a4ae; }
.log-error { color: #ff5252; }
.log-luck { color: #40c4ff; font-weight: bold; text-shadow: 0 0 8px rgba(64,196,255,.95); animation: luckFlash .9s ease-out; }
@keyframes luckFlash { 0% { background: rgba(64,196,255,.3); transform: translateX(0); } 25% { transform: translateX(-2px); } 50% { background: rgba(64,196,255,.12); transform: translateX(2px); } 100% { background: transparent; transform: translateX(0); } }
.log-excellent { color: #00e676; font-weight: bold; text-shadow: 0 0 8px rgba(0,230,118,.95); animation: exFlash .9s ease-out; }
@keyframes exFlash { 0% { background: rgba(0,230,118,.32); transform: translateX(0); } 25% { transform: translateX(-2px); } 50% { background: rgba(0,230,118,.12); transform: translateX(2px); } 100% { background: transparent; transform: translateX(0); } }
.log-enhance-ok { color: #69f0ae; font-weight: bold; }
.log-enhance-fail { color: #ff5252; }

/* 背包 */
.inv-tabs { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.inv-tab { flex: 1; padding: 4px 0; border: 1px solid #444; background: #263238; color: #aaa; border-radius: 4px; cursor: pointer; font-size: 0.8em; transition: all 0.2s; white-space: nowrap; }
.inv-tab:hover { background: #37474f; color: #fff; }
.inv-tab.active { background: #1565c0; color: #fff; border-color: #1976d2; font-weight: bold; }
.inventory-list { max-height: 300px; overflow-y: auto; }
.inv-item { padding: 4px 6px; font-size: 0.78em; border-bottom: 1px solid #0a0a12; cursor: pointer; transition: background 0.2s; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.inv-item:hover { background: #0f3460; }
.inv-actions { margin-left: auto; display: flex; gap: 3px; }
.btn-equip, .btn-sell { padding: 1px 5px; font-size: 0.85em; border: none; border-radius: 3px; cursor: pointer; }
.btn-equip { background: #2e7d32; color: white; }
.btn-equip:hover { background: #43a047; }
.btn-sell { background: #c62828; color: white; }
.btn-sell:hover { background: #e53935; }
.btn-use { background: #2e7d32; color: white; border: none; border-radius: 4px; padding: 2px 6px; cursor: pointer; font-size: 0.75em; }
.btn-use:hover { background: #43a047; }
.inv-type { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; background: #333; border-radius: 3px; font-size: 0.85em; margin-right: 4px; }
.inv-count { color: #ffd600; font-weight: bold; font-size: 0.85em; }
.bonus-tag { color: #76ff03; font-style: normal; font-size: 0.8em; margin-left: 3px; }
.luck-tag { font-style: normal; font-size: 0.8em; margin-left: 3px; color: #ffd54f; }
.ex-tag { color: #00e676; font-size: 0.8em; margin-left: 3px; }
.btn-consign { background: #00695c; color: #fff; border: none; border-radius: 3px; padding: 1px 5px; cursor: pointer; font-size: 0.8em; }
.btn-consign:hover { background: #00796b; }
.btn-lock { background: none; border: none; cursor: pointer; font-size: 0.8em; padding: 0 2px; }
/* v115：锁定件的「卖店」按占位禁用（保持行高与按钮列宽不抖动），与其它禁用按钮同口径灰显 */
.btn-sell:disabled, .btn-consign:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.5); }
.btn-sell:disabled:hover { background: #c62828; }
.btn-lock.locked { filter: brightness(1.5) drop-shadow(0 0 3px #ffd600); transform: scale(1.2); }
.inv-locked { border-left: 2px solid #ffd600; }

/* 掉落 */
.drop-list { max-height: 200px; overflow-y: auto; font-size: 0.78em; }
.drop-item { padding: 3px 0; border-bottom: 1px solid #0a0a12; color: #ffd700; }
.drop-item.ex { color: #00e676; }
.empty { color: #666; text-align: center; padding: 10px; font-size: 0.85em; }

/* 宝石强化面板 */
.jewel-panel { border-color: #6a1b9a; }
.jewel-panel h3 { color: #ce93d8; border-bottom-color: #4a148c; }
.jewel-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #0d0d1a; border-radius: 6px; margin-bottom: 6px; font-size: 0.8em; }
.jewel-row .jewel-icon { font-size: 1.3em; }
.jewel-row .jewel-name { color: #ce93d8; font-weight: bold; min-width: 58px; }
.jewel-row .jewel-count { color: #ffd600; }
.jewel-row .jewel-use { color: #777; flex: 1; font-size: 0.9em; }
.jewel-target { display: flex; align-items: center; gap: 8px; padding: 8px; background: #1a1030; border: 1px dashed #6a1b9a; border-radius: 6px; margin: 8px 0; font-size: 0.85em; flex-wrap: wrap; }
.jewel-target .target-name { color: #4fc3f7; font-weight: bold; }
.jewel-rate { color: #ffd740; font-weight: bold; }
.btn-enhance { background: linear-gradient(135deg, #6a1b9a, #9c27b0); color: #fff; border: none; border-radius: 6px; padding: 8px 14px; cursor: pointer; font-weight: bold; font-size: 0.9em; }
.btn-enhance:hover { background: linear-gradient(135deg, #8e24aa, #ba68c8); }
.btn-enhance:disabled { background: #333; color: #666; cursor: not-allowed; }
.btn-charm-toggle { background: #4a148c; color: #d1c4e9; border: 1px solid #6a1b9a; border-radius: 4px; padding: 3px 8px; cursor: pointer; font-size: 0.8em; }
.btn-charm-toggle.on { background: #9c27b0; color: #fff; }
.btn-guardian-toggle { background: #37474f; color: #cfd8dc; border: 1px solid #546e7a; border-radius: 4px; padding: 3px 8px; cursor: pointer; font-size: 0.8em; }
.btn-guardian-toggle.on { background: #ffd600; color: #000; font-weight: bold; }
.enhance-result { min-height: 22px; text-align: center; font-size: 0.85em; font-weight: bold; margin-top: 6px; }
.enhance-result.ok { color: #69f0ae; }
.enhance-result.fail { color: #ff5252; }

/* 商店 */
.shop-panel { margin-top: 0; }
.shop-row { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.shop-select { flex: 1; padding: 8px; border-radius: 6px; border: 1px solid #555; background: #2a2a2a; color: #fff; font-size: 0.82em; }
.qty-select { padding: 8px 4px; border-radius: 6px; border: 1px solid #555; background: #2a2a2a; color: #fff; font-size: 0.85em; }
.btn-shop { background: #6a1b9a; color: white; font-size: 0.8em; }
.btn-shop:hover { background: #8e24aa; }
.shop-goods { max-height: 260px; overflow-y: auto; }
.shop-good { display: flex; align-items: center; gap: 6px; padding: 4px 6px; font-size: 0.78em; border-bottom: 1px solid #0a0a12; }
.shop-good:hover { background: #0f3460; }
.shop-good .good-name { flex: 1; color: #4fc3f7; }
.shop-good .good-price { color: #ffd700; }

/* 转职/任务 */
.quest-box { background: #1a1408; border: 1px solid #7a5c00; border-radius: 6px; padding: 8px; font-size: 0.8em; color: #ffe082; margin-top: 8px; }
.quest-box.done { border-color: #2e7d32; color: #a5d6a7; }
.btn-quest { background: #ff8f00; color: #fff; border: none; border-radius: 4px; padding: 3px 10px; cursor: pointer; font-size: 0.85em; margin-top: 4px; }
.btn-quest:hover { background: #ffa000; }
.btn-quest:disabled { background: #333; color: #666; cursor: not-allowed; }

/* 世界BOSS */
.btn-boss { background: #b71c1c; color: #fff; font-weight: bold; }
.btn-boss:hover { background: #d32f2f; }
.boss-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.boss-modal { background: #1e0e0e; border: 2px solid #b71c1c; border-radius: 12px; width: 620px; max-width: 92vw; max-height: 82vh; display: flex; flex-direction: column; padding: 20px; }
.boss-modal h2 { color: #ff5252; text-align: center; margin-bottom: 4px; }
.boss-modal .boss-sub { text-align: center; color: #999; font-size: 0.85em; margin-bottom: 12px; }
.boss-hp-wrap { margin-bottom: 12px; }
.boss-log { max-height: 180px; overflow-y: auto; font-size: 0.78em; margin-top: 10px; }
.boss-reward { color: #ffd700; font-size: 0.85em; margin-top: 8px; text-align: center; }

/* 弹层通用 */
.tower-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.tower-modal { background: #1e1e2e; border: 2px solid #ff8f00; border-radius: 12px; width: 600px; max-width: 90vw; max-height: 80vh; display: flex; flex-direction: column; padding: 20px; }
.tower-header { text-align: center; margin-bottom: 12px; position: relative; }
.tower-header h2 { color: #ff8f00; margin: 0 0 6px 0; }
.tower-header p { color: #aaa; font-size: 0.85em; margin: 0; }
.tower-header .btn-small { position: absolute; top: 0; right: 0; }

/* 版本横幅 */
#update-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; background: linear-gradient(90deg, #ff6f00, #ffa000); color: #fff; text-align: center; padding: 10px 12px; font-size: 1em; font-weight: bold; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
#update-banner button { margin: 0 8px; padding: 5px 14px; border: none; border-radius: 4px; background: #fff; color: #e65100; font-weight: bold; cursor: pointer; }

/* 登录/注册 */
.login-box { background: #141428; border: 2px solid #2a2a50; border-radius: 12px; padding: 30px; width: 340px; }
.login-tabs { display: flex; gap: 0; margin-bottom: 20px; }
.login-tab { flex: 1; padding: 10px; background: #0a0a12; color: #888; border: 1px solid #333; cursor: pointer; font-size: 1em; }
.login-tab:first-child { border-radius: 6px 0 0 6px; }
.login-tab:last-child { border-radius: 0 6px 6px 0; }
.login-tab.active { background: #1565c0; color: #fff; border-color: #1565c0; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-form input { padding: 10px 14px; background: #0a0a12; border: 1px solid #333; border-radius: 6px; color: #e0e0e0; font-size: 1em; }
.login-form input:focus { border-color: #4fc3f7; outline: none; }
.login-msg { color: #ef5350; font-size: 0.85em; min-height: 20px; text-align: center; }
.btn-login { padding: 12px; background: #1565c0; color: #fff; border: none; border-radius: 6px; font-size: 1.1em; cursor: pointer; }
.btn-login:hover { background: #1976d2; }
.btn-guest { padding: 8px; background: #455a64; color: #cfd8dc; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9em; }
.btn-guest:hover { background: #546e7a; }

/* 排行榜/市场 */
.btn-rank { background: #6a1b9a; color: #fff; }
.btn-rank:hover { background: #7b1fa2; }
.btn-market { background: #00695c; color: #fff; }
.btn-market:hover { background: #00796b; }
.rank-modal { border-color: #6a1b9a; width: 500px; }
.rank-tabs { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
.rank-tab { padding: 6px 16px; background: #2a2a3e; color: #aaa; border: 1px solid #444; border-radius: 4px; cursor: pointer; }
.rank-tab.active { background: #6a1b9a; color: #fff; border-color: #6a1b9a; }
.rank-list { overflow-y: auto; flex: 1; }
.rank-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.rank-table th { background: #2a2a3e; color: #ffd700; padding: 8px; text-align: center; }
.rank-table td { padding: 6px 8px; text-align: center; border-bottom: 1px solid #333; }
.rank-table tr.rank-top td { color: #ffd700; font-weight: bold; }
.market-modal { border-color: #00695c; width: 600px; }
.enhance-modal { border-color: #6a1b9a; width: 600px; }
.btn-enhance-open { background: #6a1b9a; color: #fff; }
.btn-enhance-open:hover { background: #7b1fa2; }
/* 装备悬停提示（含与已穿戴对比） */
#item-tip { position: fixed; z-index: 3000; display: none; background: #12121f; border: 1px solid #ffd700; border-radius: 6px; padding: 8px 10px; font-size: 12px; max-width: 280px; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,.6); line-height: 1.6; }
#item-tip .tip-title { color: #ffd700; font-weight: bold; margin-bottom: 4px; }
#item-tip .tip-row { color: #cfd8dc; }
#item-tip .tip-special { color: #ce93d8; }
#item-tip .tip-cmp { color: #888; margin-top: 4px; border-top: 1px dashed #333; padding-top: 4px; }
#item-tip .tip-up { color: #69f0ae; font-weight: bold; }
#item-tip .tip-down { color: #ff5252; font-weight: bold; }
.market-content { overflow-y: auto; flex: 1; }
.market-list { display: flex; flex-direction: column; gap: 6px; }
.market-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #2a2a3e; border-radius: 6px; border: 1px solid #333; flex-wrap: wrap; }
.market-item-name { flex: 1; color: #4fc3f7; font-size: 0.9em; }
.market-item-seller { color: #888; font-size: 0.8em; }
.market-item-price { color: #ffd700; font-weight: bold; min-width: 80px; text-align: right; }
.btn-market-buy { background: #00695c; color: #fff; border: none; border-radius: 4px; padding: 4px 12px; cursor: pointer; font-size: 0.85em; }
.btn-market-buy:hover { background: #00796b; }
.btn-market-cancel { background: #c62828; color: #fff; border: none; border-radius: 4px; padding: 4px 12px; cursor: pointer; font-size: 0.85em; }
.market-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; color: #aaa; font-size: 0.85em; }
/* v100：交易市场规则元信息条（我的上架 N/6 · 成交税 10% · 24h 未售自动退回 · 待领退回红点）——三项规则服务端权威，此条仅作提示故均可悬停看说明 */
.market-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 7px 10px; background: rgba(79,195,247,.07); border-bottom: 1px solid rgba(255,255,255,.12); font-size: 12px; color: #b0bec5; }
.market-meta-item { cursor: help; white-space: nowrap; }
.market-meta-item b { color: #69f0ae; }
.market-meta-full, .market-meta-full b { color: #ffb74d; }   /* 上架名额已满 */
.market-meta-warn { color: #ff5252; font-weight: bold; cursor: help; }   /* 待领退回红点：背包满导致到期退回物品滞留台账 */
.market-item-left { color: #78909c; font-size: 0.78em; cursor: help; white-space: nowrap; }   /* 自己挂单的到期剩余时间 */

/* 佣兵市场（v38） */
.btn-merc { background: #283593; color: #fff; }
.btn-merc:hover { background: #3949ab; }
.btn-friend { background: #2e7d32; color: #fff; }
.btn-friend:hover { background: #388e3c; }
.merc-modal { border-color: #3949ab; width: 640px; }
.merc-modal .rank-tab.active { background: #3949ab; border-color: #3949ab; }
.merc-toolbar { display: flex; align-items: center; gap: 12px; margin: 6px 0; }
.merc-team-hint { color: #aaa; font-size: 0.85em; }
.merc-myjob { background: #263238; border: 1px solid #37474f; border-left: 3px solid #ffb300; border-radius: 6px; padding: 8px 12px; margin: 6px 0; color: #eceff1; font-size: 0.85em; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.merc-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.merc-card { background: #2a2a3e; border: 1px solid #333; border-radius: 8px; padding: 10px 12px; }
.merc-card.working { border-left: 3px solid #ffb300; }
.merc-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; color: #e0e0e0; }
.merc-card-head b { color: #4fc3f7; }
.merc-cls { color: #aaa; font-size: 0.85em; }
.merc-power { color: #ffd700; font-size: 0.85em; margin-left: auto; }
.merc-card-row { color: #cfd8dc; font-size: 0.82em; margin: 3px 0; }
.merc-label { display: inline-block; min-width: 48px; color: #90a4ae; }
.merc-skill { display: inline-block; background: #37474f; color: #80deea; border-radius: 4px; padding: 1px 7px; margin: 1px 3px 1px 0; font-size: 0.95em; }
.merc-card-foot { margin-top: 8px; text-align: right; }
.merc-mine { color: #66bb6a; font-size: 0.85em; }

/* 发布工作单弹层（v38） */
.publish-modal { border-color: #3949ab; width: 520px; }
.publish-body { display: flex; flex-direction: column; gap: 12px; }
.publish-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.publish-row label { min-width: 68px; color: #90a4ae; font-size: 0.9em; }
.publish-durs { display: flex; gap: 6px; }
.publish-hint { color: #888; font-size: 0.8em; }
.publish-note { color: #aaa; font-size: 0.8em; line-height: 1.6; background: #16213e; border-radius: 6px; padding: 8px 10px; margin: 0; }
.publish-note b { color: #ffd700; }
.btn-use.sel { background: #3949ab; box-shadow: 0 0 0 1px #5c6bc0 inset; }

/* 好友弹层（v38） */
.friend-modal { border-color: #2e7d32; width: 520px; }
.friend-search { display: flex; gap: 8px; margin-bottom: 10px; }
.friend-search input { padding: 6px 10px; background: #0a0a12; border: 1px solid #333; border-radius: 6px; color: #e0e0e0; }
.friend-search-res, .friend-reqs { background: #1b2a1b; border: 1px solid #2e7d32; border-radius: 6px; padding: 8px; margin-bottom: 10px; }
.friend-reqs strong { color: #ffd700; font-size: 0.85em; }
.friend-req { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: #cfd8dc; font-size: 0.85em; }
.friend-req span { flex: 1; }
.friend-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.friend-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #2a2a3e; border: 1px solid #333; border-radius: 6px; }
.friend-name { flex: 1; color: #e0e0e0; font-size: 0.9em; }
.friend-name small { color: #888; }
.friend-power { color: #ffd700; font-size: 0.8em; }

/* 佣兵队友卡（战斗面板，v38） */
.merc-team-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.merc-team-card { background: #16233a; border: 1px solid #283593; border-left: 3px solid #66bb6a; border-radius: 6px; padding: 6px 8px; }
.merc-team-card.down { opacity: 0.5; border-left-color: #c62828; }
.merc-team-name { color: #e0e0e0; font-size: 0.85em; margin-bottom: 3px; }
.merc-team-name small { color: #888; }
.merc-team-ctl { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.merc-team-ctl select { background: #0a0a12; color: #e0e0e0; border: 1px solid #444; border-radius: 4px; font-size: 0.75em; padding: 1px 4px; }
.merc-team-ctl select:disabled { opacity: 0.5; cursor: not-allowed; }
.merc-team-time { color: #ffb300; font-size: 0.75em; }
.team-buffs { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: #aaa; font-size: 0.8em; flex-wrap: wrap; }
.buff-tag { background: #4a148c; color: #e1bee7; border-radius: 4px; padding: 1px 8px; font-size: 0.95em; }
.allow-hire-toggle { color: #b0bec5; font-size: 0.8em; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* ============ v42：效率统计面板 ============ */
.stats-panel { border-color: #1b5e20; }
.stats-panel h3 { color: #69f0ae; border-bottom-color: #1b5e20; }
.stats-bar { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.stats-item { font-size: 0.8em; color: #cfd8dc; white-space: nowrap; }
.stats-item b { color: #ff8f00; }
.stats-empty { color: #666; font-size: 0.78em; padding: 6px 0; }
.dps-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin: 8px 0 4px; background: #0a0a12; }
.dps-seg { height: 100%; transition: width 0.3s; }
.dps-legends { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.75em; margin-bottom: 6px; }
.dps-legend { white-space: nowrap; }
.skill-table { width: 100%; border-collapse: collapse; font-size: 0.76em; margin: 6px 0; }
.skill-table th, .skill-table td { padding: 2px 6px; border-bottom: 1px solid #0a0a12; color: #cfd8dc; text-align: left; }
.skill-table th { color: #4fc3f7; font-weight: normal; }
.skill-table td.r, .skill-table th.r { text-align: right; }
.drop-stats { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ds-group { background: #0d0d1a; border-radius: 6px; padding: 5px 8px; }
.ds-head { font-size: 0.78em; color: #ffd740; margin-bottom: 3px; }
.ds-items { display: flex; flex-wrap: wrap; gap: 3px 8px; }
.ds-item { font-size: 0.75em; color: #b0bec5; }
.ds-item b { color: #69f0ae; }

/* ============ v42：装备图鉴弹层 ============ */
.dex-modal { border-color: #4fc3f7; width: 680px; }
.dex-modal .tower-header h2 { color: #4fc3f7; }
.dex-cls-tabs { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
.dex-cls-tab { padding: 6px 16px; background: #2a2a3e; color: #aaa; border: 1px solid #444; border-radius: 4px; cursor: pointer; font-size: 0.9em; }
.dex-cls-tab:hover { background: #33334d; color: #ddd; }
.dex-cls-tab.active { background: #0277bd; color: #fff; border-color: #4fc3f7; }
.dex-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.8em; color: #b0bec5; padding: 8px 10px; background: #0d0d1a; border-radius: 6px; margin-bottom: 10px; }
.dex-toolbar b { color: #ff8f00; }
.dex-tip-strong { color: #ff5252; font-weight: bold; }
.dex-list { overflow-y: auto; max-height: 56vh; padding-right: 4px; }
.dex-group-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: sticky; top: 0; z-index: 2; background: #141428; color: #4fc3f7; font-size: 0.88em; font-weight: bold; padding: 6px 4px; border-bottom: 1px solid #2a2a50; margin-top: 4px; }
.dex-group-title .btn-small { background: #37474f; color: #cfd8dc; padding: 2px 8px; font-size: 0.85em; }
.dex-group-title .btn-small:hover { background: #455a64; }
.dex-cnt { color: #ff8f00; font-size: 0.8em; font-weight: normal; }
.dex-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 3px 6px; font-size: 0.78em; border-bottom: 1px solid #0a0a12; }
.dex-row:hover { background: #0f3460; }
.dex-checked { background: rgba(198, 40, 40, 0.14); }
.dex-checked .dex-name { text-decoration: line-through; color: #90a4ae; }
.dex-label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; min-width: 168px; }
.dex-label input { cursor: pointer; }
.dex-name { color: #e0e0e0; font-weight: bold; }
.dex-lv { color: #78909c; font-size: 0.92em; }
.dex-tier { color: #4fc3f7; font-size: 0.92em; white-space: nowrap; cursor: help; }   /* v99：图鉴装备档位（_dropTier=dropLvl优先/否则lvl，掉落门控尺度，与需求等级 Lv 不同维度） */
.dex-tier-gap { color: #ff5252; }   /* v99：真·档位空档（≤normalMax 却无地图区间覆盖）——普通怪永不掉落，标红⚠ */
.dex-tier-boss { color: #ffd54f; }   /* v99：档位>普通怪掉落上限——顶档神装仅 BOSS 专属池产出（设计如此、不标⚠） */
.dex-req { color: #ffb74d; font-size: 0.92em; white-space: nowrap; }   /* v81：图鉴装备需求属性（力/敏/智） */
.dex-job { color: #b388ff; font-size: 0.92em; }
.dex-stats { color: #69f0ae; font-size: 0.92em; }
.dex-badge { margin-left: auto; font-style: normal; font-size: 0.9em; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.dex-badge.b-eq { color: #0a0a12; background: #69f0ae; }
.dex-badge.b-bag { color: #0a0a12; background: #82b1ff; }
.dex-badge.b-wh { color: #0a0a12; background: #ffb74d; }
.dex-badge.b-none { color: #777; background: #263238; }

/* ============ v42：背包整理工具条 / 锁定标记 / 图鉴入口按钮 ============ */
.inv-tools { margin-left: 8px; display: inline-flex; gap: 4px; }
.inv-tools .btn-small { background: #37474f; color: #cfd8dc; padding: 2px 8px; }
.inv-tools .btn-small:hover { background: #455a64; }
.lock-tag { font-style: normal; color: #ffd600; margin-left: 3px; font-size: 0.85em; }
.btn-dex { background: #00695c; color: #fff; }
.btn-dex:hover { background: #00796b; }

/* 滚动条 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a12; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

@media (max-width: 1024px) {
  .main-content { grid-template-columns: 1fr; }
  .left-panel, .right-panel { flex-direction: row; flex-wrap: wrap; }
  .panel { flex: 1; min-width: 250px; }
}

/* ============================================================
   v53 移动端适配（纯 CSS · 仅游戏主界面）：以下断点只在窄屏生效，
   桌面(>1024px)与上面的平板断点规则完全不受影响，PC 布局零变化。
   ============================================================ */
@media (max-width: 768px) {
  /* 1) 整页竖向滚动：解除桌面 height:100vh + overflow:hidden 造成的窄屏无法滚动 */
  .game-layout { height: auto; min-height: 100vh; }
  .main-content { overflow: visible; }
  /* 2) 面板竖向堆叠 + 战斗优先（地图/战斗/日志置顶，角色/装备次之，背包/掉落最后） */
  .main-content { display: flex; flex-direction: column; }
  .center-panel { order: 1; }
  .left-panel { order: 2; }
  .right-panel { order: 3; }
  /* 3) 覆盖 1024 断点的“面板横排”：每块面板占满一行，不再并排 */
  .left-panel, .right-panel, .center-panel { flex-direction: column; flex-wrap: nowrap; }
  .panel { flex: none; width: 100%; min-width: 0; }
  /* 4) 顶部工具条紧凑化：11 个按钮仍全部可见(换行)，每个够大能点 */
  .game-header { gap: 8px; padding: 8px 10px; }
  .btn-small { min-height: 36px; padding: 6px 10px; font-size: 0.85em; }
  .qq-group { display: none; }
  /* 5) 加大触控目标（现按钮 padding 过小，手指难点） */
  .stat-input { padding: 6px 8px; width: 64px; flex-basis: 64px; }
  .btn { padding: 12px; }
  .monster-card { padding: 8px 10px; }
  .btn-equip, .btn-sell, .btn-use { padding: 5px 9px; }
  .inv-tab { padding: 8px 0; }
}

@media (max-width: 480px) {
  /* 属性加点由两列改单列，避免 名称+数值+输入框挤压 */
  .stat-grid { grid-template-columns: 1fr; }
  /* 怪群列表不占满屏 */
  .monster-group { max-height: 45vh; }
  /* 头部再压一档 */
  .game-header .player-name { font-size: 1em; }
  .btn-small { font-size: 0.8em; padding: 5px 8px; }
}

/* v102 移动端交易市场弹层修复：窄屏下 v100 规则元信息条换行 3 行 + 筛选栏换行 4 行，
   把 flex:1 的 .market-content 挤到只剩一条（列表几乎不可见）。改为弹层整体滚动 + 列表自然展开；
   弹层滚动位置已加入 ui.js SCROLL_SEL 白名单，每秒全量重渲染不会回顶。桌面(>768px)不受影响。 */
@media (max-width: 768px) {
  .market-modal { max-height: 94vh; overflow-y: auto; padding: 12px; }
  .market-modal .market-content { flex: none; overflow: visible; }
  .market-modal .market-meta { font-size: 11px; gap: 4px 10px; padding: 5px 8px; }
  /* 翻页条吸底：列表再长也随时能翻页，背景盖住下方滚过的商品行 */
  .market-modal .market-pager { position: sticky; bottom: 0; background: #1e1e2e; padding: 8px 0 2px; margin-top: 8px; }
}

/* 触控设备：防点按后 hover 缩放态卡住（纯视觉，无功能影响） */
@media (hover: none) {
  .btn:hover, .monster-card:hover { transform: none; }
  /* v102：移动端长按装备名看提示时页面持续自动滚动——根因是触屏长按触发浏览器文字选中，
     按住的手指微移即扩展选区，选区逼近视口边缘时浏览器持续自动滚动（桌面右键不触发选中，故移动端独有）。
     触屏设备禁用游戏区文字选中与长按呼出菜单断根；桌面(hover 能力)不受影响、仍可划选复制；输入框保留可选中 */
  .game-layout { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .game-layout input, .game-layout textarea { -webkit-user-select: text; user-select: text; }
}