/* ===== 末法时代 - 游戏样式(水墨风格) ===== */

/* === 基础重置 === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0f; }

/* === 游戏容器 === */
#game-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "status"
    "scene"
    "skills";
  width: 100%; height: 100vh;
  font-family: "Noto Serif SC", "SimSun", serif;
  color: #d4c5a9;
  user-select: none;
  overflow: hidden;
}

/* === 状态栏 === */
#status-bar {
  grid-area: status;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: #12100e;
  border-bottom: 1px solid #2a2520;
  gap: 8px;
  flex-shrink: 0;
  z-index: 10;
}
.stat-group { display: flex; gap: 5px; flex-wrap: wrap; }
.stat-item {
  display: flex; align-items: center; gap: 2px;
  font-size: 13px; white-space: nowrap;
}
.stat-icon { font-size: 16px; }
.stat-label { color: #8a7e6b; min-width: 24px; font-size: 11px; }
.stat-bar-wrap {
  width: 80px; height: 8px; background: #1a1815;
  border-radius: 2px; overflow: hidden; border: 1px solid #2a2520;
}
.stat-bar { height: 100%; border-radius: 1px; transition: width 0.2s; }
#bar-hp { background: #c0392b; }
#bar-stamina { background: #d4a017; }
#bar-spirit { background: #8e44ad; }
#bar-food { background: #27ae60; }
#bar-water { background: #2980b9; }
.stat-value { color: #c4b593; min-width: 55px; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.stat-value.critical-text { color: #ff3333; animation: criticalTextPulse 0.6s infinite; }

/* 状态条粒子画布 */
#stat-particles-canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}

/* === 状态条特效动画 === */

/* 残血闪烁 (<20%) */
.stat-bar.critical-hp {
  animation: barCriticalHp 0.4s infinite;
}
@keyframes barCriticalHp {
  0%, 100% { background: #c0392b; box-shadow: 0 0 4px #ff0000; }
  50% { background: #ff1a1a; box-shadow: 0 0 10px #ff0000, 0 0 18px #ff4444; }
}
.stat-bar.critical-spirit {
  animation: barCriticalSp 0.55s infinite;
}
@keyframes barCriticalSp {
  0%, 100% { background: #8e44ad; box-shadow: 0 0 3px #7b1fa2; }
  50% { background: #ce93d8; box-shadow: 0 0 10px #ce93d8, 0 0 18px #9c27b0; }
}
.stat-bar.critical-stamina {
  animation: barCriticalSt 0.5s infinite;
}
@keyframes barCriticalSt {
  0%, 100% { background: #d4a017; box-shadow: 0 0 3px #ffab00; }
  50% { background: #ffd600; box-shadow: 0 0 8px #ffab00, 0 0 14px #ffd600; }
}

/* 满条辉光 (100%) */
.stat-bar.full-hp {
  box-shadow: 0 0 6px #ff5533, inset 0 1px 0 rgba(255,255,255,0.2);
  animation: barFullHp 2s ease-in-out infinite;
}
@keyframes barFullHp {
  0%, 100% { box-shadow: 0 0 4px #ff4422, 0 0 8px #ff4422; }
  50% { box-shadow: 0 0 8px #ff6644, 0 0 16px #ff4422, 0 0 24px #ff2200; }
}
.stat-bar.full-spirit {
  box-shadow: 0 0 6px #b388ff, inset 0 1px 0 rgba(255,255,255,0.15);
  animation: barFullSp 2.2s ease-in-out infinite;
}
@keyframes barFullSp {
  0%, 100% { box-shadow: 0 0 4px #9b59b6, 0 0 8px #9b59b6; }
  50% { box-shadow: 0 0 8px #b388ff, 0 0 16px #9b59b6, 0 0 24px #7b1fa2; }
}
.stat-bar.full-stamina {
  box-shadow: 0 0 5px #d4a017, inset 0 1px 0 rgba(255,255,255,0.12);
  animation: barFullSt 2.5s ease-in-out infinite;
}
@keyframes barFullSt {
  0%, 100% { box-shadow: 0 0 3px #c99400, 0 0 6px #c99400; }
  50% { box-shadow: 0 0 6px #ffc107, 0 0 12px #d4a017, 0 0 20px #ff8f00; }
}

/* 受伤闪白 */
.stat-bar.damage-flash {
  animation: barDmgFlash 0.25s ease-out;
}
@keyframes barDmgFlash {
  0% { filter: brightness(2.5); box-shadow: 0 0 18px #ffffff; }
  100% { filter: brightness(1); box-shadow: none; }
}

/* 治疗绿光 */
.stat-bar.heal-pulse {
  animation: barHealPulse 0.5s ease-out;
}
@keyframes barHealPulse {
  0% { filter: brightness(1.6); box-shadow: 0 0 12px #44ff66, 0 0 22px #22cc44; }
  100% { filter: brightness(1); box-shadow: none; }
}

/* 灵气消耗暗闪 */
.stat-bar.spirit-drain {
  animation: barSpiritDrain 0.25s ease-out;
}
@keyframes barSpiritDrain {
  0% { filter: brightness(2); box-shadow: 0 0 10px #b388ff; }
  100% { filter: brightness(0.65); box-shadow: none; }
}

/* 数值文字闪烁 */
@keyframes criticalTextPulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 4px currentColor; }
  50% { opacity: 0.5; text-shadow: 0 0 10px currentColor; }
}

#death-timer { display: flex; align-items: center; gap: 3px; font-size: 11px; color: #e74c3c; }
#death-timer.hidden { display: none; }
#death-timer .death-icon { font-size: 16px; animation: pulse 0.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

.realm-info { display: flex; align-items: center; gap: 4px; font-size: 10px; }
#realm-name { color: #f0c040; font-weight: bold; }
.exp-bar-wrap { width: 40px; height: 4px; background: #1a1815; border-radius: 2px; overflow: hidden; }
.exp-bar { height: 100%; background: #f0c040; border-radius: 1px; transition: width 0.3s; }

/* === 游戏场景 === */
#game-scene {
  grid-area: scene;
  position: relative;
  overflow: hidden;
  background: #0a0a0f;
  min-height: 0;
}
#game-canvas {
  display: block;
  width: 100%; height: 100%;
  cursor: crosshair;
}
#filter-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: 5;
}
#debug-panel {
  position: absolute; top: 4px; left: 4px;
  background: rgba(0,0,0,0.75); color: #0f0;
  font-size: 11px; padding: 4px 8px; border-radius: 3px;
  font-family: monospace; z-index: 20; pointer-events: none;
  white-space: pre-line; line-height: 1.4;
  display: none;  /* 默认隐藏，按 ~ 显示 */
}
#game-log {
  position: absolute; bottom: 4px; left: 4px; right: 4px;
  z-index: 20;
  border-radius: 6px;
  padding: 0;
  background: transparent;
  border: none;
  transition: all 0.2s ease;
  display: flex; flex-direction: column;
  pointer-events: none;
  /* 未激活：无背景框，纯文字覆盖在游戏画面上 */
}
/* 输入激活时显示背景和边框 */
#game-log.input-active {
  background: rgba(10, 8, 6, 0.9);
  border: 1px solid #5a3a20;
  box-shadow: 0 0 12px rgba(180, 120, 40, 0.15);
  padding: 6px 8px;
  pointer-events: auto;
}
#game-log.hidden { display: none; }
#log-content {
  font-size: 12px; color: #c4b593; line-height: 1.5;
  height: 120px; overflow-y: hidden;
  opacity: 1; pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.5);
  transition: text-shadow 0.15s;
}
/* 激活时可滚动，显示自定义滚动条 */
#game-log.input-active #log-content {
  pointer-events: auto;
  text-shadow: none;
  overflow-y: auto;
}
/* 自定义滚动条 — 暗色系，与对话框一致 */
#game-log.input-active #log-content::-webkit-scrollbar { width: 5px; }
#game-log.input-active #log-content::-webkit-scrollbar-track { background: transparent; }
#game-log.input-active #log-content::-webkit-scrollbar-thumb {
  background: #3a2a14; border-radius: 3px;
}
#game-log.input-active #log-content::-webkit-scrollbar-thumb:hover { background: #5a3a20; }
/* Firefox */
#game-log.input-active #log-content {
  scrollbar-width: thin;
  scrollbar-color: #3a2a14 transparent;
}
#log-input-row { display: flex; gap: 4px; margin-top: 4px; }
#log-input-row.hidden { display: none; }
#log-input {
  flex: 1; padding: 6px 10px; font-size: 13px;
  background: #1a1814; border: 1px solid #4a3a2a; border-radius: 4px;
  color: #c8b88a; font-family: 'KaiTi', serif; outline: none;
}
#log-input::placeholder { opacity: 0.5; color: #8a7a5a; }
#log-input:focus { border-color: #8a7a5a; }
#log-send-btn {
  padding: 6px 14px; font-size: 12px; font-family: 'KaiTi', serif;
  background: #3a2a14; color: #c8a84c; border: 1px solid #5a3a20;
  border-radius: 4px; cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
}
#log-send-btn:hover { background: #5a3a20; color: #ffcc66; }
.log-msg.important { color: #f0c040; }
.log-msg.danger { color: #e74c3c; }

/* === 物品栏弹框 === */
#inventory-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85); z-index: 99;
  display: flex; align-items: center; justify-content: center;
}
#inventory-overlay.hidden { display: none; }
.inv-popup-panel {
  background: #12100e; border: 2px solid #3a3028; border-radius: 8px;
  max-width: 420px; width: 90%; max-height: 75vh; overflow-y: auto;
  padding: 16px;
}
.inv-popup-title { font-size: 16px; color: #e0d0a0; text-align: center; margin-bottom: 8px; }
#inv-popup-list { display: flex; flex-direction: column; gap: 0; padding: 0; }
.inv-popup-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 8px 4px; background: #0f0d0a; border: 1px solid #1a1815;
  border-radius: 6px; cursor: pointer; transition: all 0.15s;
  min-height: 64px; position: relative; user-select: none;
}
.inv-popup-item:hover { border-color: #4a3f30; background: #1a1815; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.inv-popup-item:active { transform: scale(0.95); background: #2a2218; border-color: #c9a84c; }
.inv-popup-icon { font-size: 24px; line-height: 1; }
.inv-popup-name { color: #d4c5a9; font-size: 11px; text-align: center; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-popup-desc { display: none; }
.inv-popup-count {
  position: absolute; bottom: 2px; right: 4px;
  color: #c9a84c; font-size: 10px; font-weight: bold;
  background: rgba(0,0,0,0.5); padding: 0 3px; border-radius: 2px;
}
.inv-category-tabs { display: flex; gap: 6px; margin-bottom: 6px; justify-content: center; border-bottom: 1px solid #2a2520; padding-bottom: 8px; }
.inv-grid-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 4px 0;
}
.inv-cat-tab {
  padding: 4px 14px; font-size: 12px; border: 1px solid #3a3028; border-radius: 4px;
  cursor: pointer; color: #8a7a6a; background: #0f0d0b; transition: all 0.2s;
}
.inv-cat-tab:hover { border-color: #6a5a4a; color: #d4c5a9; }
.inv-cat-tab.active { border-color: #c9a84c; color: #e0d0a0; background: #1a1815; }
.inv-empty { color: #5a5245; font-size: 12px; text-align: center; padding: 20px; }
.inv-popup-close {
  text-align: center; margin-top: 12px; padding: 8px;
  color: #5a5245; font-size: 11px; cursor: pointer;
  border-top: 1px solid #2a2520; transition: color 0.2s;
}
.inv-popup-close:hover { color: #d4c5a9; }
.inv-overlay-backdrop {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/* === 新背包格子面板 === */
.inv-grid-panel {
  background: #12100e; border: 2px solid #3a3028; border-radius: 8px;
  padding: 12px; max-height: 80vh; overflow-y: auto;
  position: relative; z-index: 1;
}
.inv-grid-title {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 16px; color: #e0d0a0; margin-bottom: 8px;
}
.inv-slot-counter { font-size: 12px; color: #5a5245; }
#inv-grid-container {
  /* grid 在 JS 中设置 */
}
.inv-grid-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid #2a2520;
}
.inv-grid-hint { font-size: 10px; color: #4a4038; }
.inv-close-btn {
  padding: 4px 14px; font-size: 11px; cursor: pointer;
  color: #5a5245; background: #0f0d0b; border: 1px solid #3a3028;
  border-radius: 4px; transition: all 0.2s;
}
.inv-close-btn:hover { color: #d4c5a9; border-color: #6a5a4a; }

/* === 技能树弹框 === */
#skill-tree-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85); z-index: 99;
  display: flex; align-items: center; justify-content: center;
}
#skill-tree-overlay.hidden { display: none; }
.skill-tree-panel {
  background: #12100e; border: 2px solid #3a3028; border-radius: 8px;
  max-width: 480px; width: 92%; max-height: 80vh; overflow-y: auto;
  padding: 16px;
}
.skill-tree-title { font-size: 16px; color: #e0d0a0; text-align: center; margin-bottom: 12px; }
#skill-tree-content { display: flex; flex-direction: column; gap: 4px; }
.skill-tree-close {
  text-align: center; margin-top: 12px; padding: 8px;
  color: #5a5245; font-size: 11px; cursor: pointer;
  border-top: 1px solid #2a2520; transition: color 0.2s;
}
.skill-tree-close:hover { color: #d4c5a9; }
.skill-tree-backdrop {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
}

/* === 状态面板(技能树) === */
#skill-bar {
  grid-area: skills;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 8px;
  background: #12100e;
  border-top: 1px solid #2a2520;
  flex-shrink: 0;
  z-index: 10;
}
.skill-section { display: flex; align-items: center; gap: 4px; }
.section-label {
  font-size: 10px; color: #6a5e4b; writing-mode: vertical-rl;
  letter-spacing: 2px; height: 36px; display: flex; align-items: center;
}
.skill-slots { display: flex; gap: 3px; }
.skill-slot {
  width: 40px; height: 40px;
  background: #1a1815;
  border: 1px solid #2a2520;
  border-radius: 3px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  overflow: hidden;
}
.skill-slot:hover { border-color: #4a3f30; background: #252218; }
.skill-slot.equipped { border-color: #4a3f30; background: #252218; }
.skill-slot .slot-icon { font-size: 16px; line-height: 1; }
.skill-slot .slot-name { font-size: 8px; color: #6a5e4b; }
.skill-slot .slot-key {
  position: absolute; bottom: 1px; right: 3px;
  font-size: 8px; color: #4a3f30; font-family: monospace;
}
.skill-slot .slot-cd {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 0%; background: rgba(0,0,0,0.6);
  transition: height 0.1s;
  pointer-events: none;
}
.skill-slot.passive-slot.passive-active {
  /* 旧的绿色激活样式被淡金色动画覆盖 */
}
.skill-slot.passive-slot.passive-active .slot-icon { }

/* 被动技能激活动画 — 淡金色循环滚动光效 */
@keyframes passiveGlow {
  0%   { box-shadow: 0 0 4px rgba(200,160,60,0.2), inset 0 0 4px rgba(200,160,60,0.05); }
  25%  { box-shadow: 0 0 8px rgba(200,160,60,0.35), inset 0 0 8px rgba(200,160,60,0.1); }
  50%  { box-shadow: 0 0 12px rgba(200,160,60,0.5), inset 0 0 12px rgba(200,160,60,0.15); }
  75%  { box-shadow: 0 0 8px rgba(200,160,60,0.35), inset 0 0 8px rgba(200,160,60,0.1); }
  100% { box-shadow: 0 0 4px rgba(200,160,60,0.2), inset 0 0 4px rgba(200,160,60,0.05); }
}
@keyframes passiveBorderPulse {
  0%   { border-color: #5a3a10; }
  50%  { border-color: #9a6a20; }
  100% { border-color: #5a3a10; }
}
.skill-slot.passive-active {
  animation: passiveGlow 2s ease-in-out infinite, passiveBorderPulse 2s ease-in-out infinite;
  background: #1a1410 !important;
}
.skill-slot.passive-active .slot-icon {
  color: #d4a030 !important;
  text-shadow: 0 0 4px rgba(200,160,40,0.4);
}
.skill-slot.passive-active .slot-name {
  color: #b89030 !important;
}
.skill-divider {
  width: 1px; height: 32px; background: #2a2520;
}
.formation-slot {
  opacity: 0.6; cursor: pointer;
}
.formation-slot:hover { border-color: #3a3028; background: #1a1815; opacity: 0.8; }

/* === 动画 === */
@keyframes skillActivate { 0%{transform:scale(0.9)} 50%{transform:scale(1.05)} 100%{transform:scale(1)} }
.skill-slot:active { animation: skillActivate 0.1s ease-out; }

/* === 系统信息面板（Enter） === */
#system-info-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 90;
  pointer-events: none;
}
#system-info-overlay.hidden { display: none; }
.sysinfo-backdrop {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.4);
}
.sysinfo-panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: #1a1815; border: 1px solid #2a2520; border-radius: 8px;
  padding: 20px 28px; min-width: 280px; max-width: 400px;
  color: #c4b99a; font-size: 13px; line-height: 1.8;
}
.sysinfo-title {
  font-size: 14px; color: #e8dcc8; text-align: center;
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid #2a2520; font-weight: bold;
}
#sysinfo-content { text-align: left; }
#sysinfo-content .stat-row {
  display: flex; justify-content: space-between; padding: 2px 0;
}
#sysinfo-content .stat-row .label { color: #6a5e4b; }
#sysinfo-content .stat-row .value { color: #c4b99a; }

/* 状态面板内 stat-row 通用 */
.stats-panel .stat-row {
  display: flex; justify-content: space-between; padding: 3px 8px;
  font-size: 12px; color: #a09080;
}
.stats-panel .stat-eq-bonus {
  font-size: 10px; color: #88cc88; margin-left: 2px;
}
.stats-panel .equip-row { cursor: pointer; border-radius: 3px; }
.stats-panel .equip-row:hover { background: #2a2018; }
.stats-panel .equip-row span:first-child { font-size: 12px; }
.stats-panel .empty-slot { color: #4a4038; }
.stats-panel .empty-slot:hover { background: transparent; cursor: default; }

/* === 暂停弹窗 === */
/* === 暂停面板 === */
#pause-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85); z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
#pause-overlay.hidden { display: none; }
.pause-backdrop { position: absolute; top:0;left:0;width:100%;height:100%; }
.pause-panel {
  position: relative;
  background: #12100e; border: 2px solid #3a3028; border-radius: 8px;
  width: 420px; max-height: 85vh; overflow-y: auto;
  font-size: 13px; color: #d4c5a9;
}
.pause-tabs {
  display: flex; border-bottom: 1px solid #2a2520;
  position: sticky; top: 0; background: #12100e; z-index: 1;
}
.pause-tab {
  flex: 1; padding: 10px 0; text-align: center;
  font-size: 14px; color: #8a7e6b; cursor: pointer;
  border-bottom: 2px solid transparent; transition: all 0.2s;
}
.pause-tab:hover { color: #d4c5a9; }
.pause-tab.active { color: #c9a84c; border-bottom-color: #c9a84c; }
.pause-tab-content { display: none; padding: 12px 16px; }
.pause-tab-content.active { display: block; }
.pause-content { max-height: 50vh; overflow-y: auto; }
.pause-close {
  text-align: center; padding: 10px; border-top: 1px solid #2a2520;
  color: #8a7e6b; font-size: 12px; cursor: pointer; transition: color 0.2s;
}
.pause-close:hover { color: #c9a84c; }

/* === 快捷键表 === */
.keybinds { width: 100%; border-collapse: collapse; }
.keybinds td { padding: 5px 8px; border-bottom: 1px solid #1a1815; font-size: 12px; }
.keybinds td:first-child { color: #c9a84c; font-weight: bold; width: 40%; }

/* === 存档槽 === */
.save-slots { display: flex; flex-direction: column; gap: 8px; }
.save-slot {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: #1a1815; border: 1px solid #2a2520;
  border-radius: 6px; transition: border-color 0.2s;
}
.save-slot:hover { border-color: #4a3f30; }
.save-slot-num {
  font-size: 20px; color: #c9a84c; font-weight: bold; min-width: 30px; text-align: center;
}
.save-slot-info { flex: 1; }
.save-slot-empty { color: #5a5245; font-size: 12px; }
.save-slot-meta { font-size: 11px; color: #8a7e6b; line-height: 1.5; }
.save-slot-meta .ss-realm { color: #c9a84c; }
.save-slot-meta .ss-date { color: #5a5245; }
.save-slot-actions { display: flex; gap: 4px; }
.save-slot-btn {
  padding: 4px 10px; border: 1px solid #3a3028; border-radius: 4px;
  background: #1a1815; color: #d4c5a9; font-size: 11px; cursor: pointer;
  transition: all 0.2s; font-family: inherit;
}
.save-slot-btn:hover { background: #2a2520; }
.save-slot-btn.save { color: #88cc88; border-color: #3a5a3a; }
.save-slot-btn.save:hover { background: #2a3a2a; }
.save-slot-btn.load { color: #88aacc; border-color: #3a4a5a; }
.save-slot-btn.load:hover { background: #2a303a; }
.save-slot-btn.del { color: #cc6666; border-color: #5a3a3a; }
.save-slot-btn.del:hover { background: #3a2a2a; }

/* === 存档操作按钮 === */
.save-actions {
  display: flex; gap: 8px; margin-top: 10px; justify-content: center;
}
.save-btn {
  padding: 6px 14px; border: 1px solid #3a3028; border-radius: 4px;
  background: #1a1815; color: #d4c5a9; font-size: 12px; cursor: pointer;
  transition: all 0.2s; font-family: inherit;
}
.save-btn:hover { background: #2a2520; border-color: #4a3f30; }

/* === 设置面板 === */
.settings-group { margin-bottom: 12px; }
.settings-label { font-size: 12px; color: #8a7e6b; margin-bottom: 4px; }
.settings-slider {
  width: 100%; height: 6px; -webkit-appearance: none; appearance: none;
  background: #2a2520; border-radius: 3px; outline: none;
}
.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: #c9a84c; cursor: pointer; border: 2px solid #1a1815;
}
.settings-select {
  width: 100%; padding: 6px 8px;
  background: #1a1815; border: 1px solid #3a3028; border-radius: 4px;
  color: #d4c5a9; font-size: 12px; font-family: inherit; cursor: pointer;
}
.settings-checkbox {
  display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: #d4c5a9;
}
.settings-checkbox input { accent-color: #c9a84c; }
.settings-danger { margin-top: 16px; text-align: center; }
.settings-btn-danger {
  padding: 6px 16px; border: 1px solid #5a2a2a; border-radius: 4px;
  background: #2a1515; color: #cc6666; font-size: 12px; cursor: pointer;
  transition: all 0.2s; font-family: inherit;
}
.settings-btn-danger:hover { background: #3a2020; }

/* === 鼠标按钮 === */
.mouse-buttons {
  display: flex; gap: 8px; align-items: center; padding: 2px 4px;
}
.mouse-btn {
  display: flex; align-items: center; gap: 3px;
  padding: 6px 12px; border-radius: 4px;
  background: #1a1815; border: 1px solid #2a2520;
  font-size: 9px; color: #8a7e6b; cursor: default;
}
.mouse-btn:hover { border-color: #4a3f30; }
.mouse-icon { font-size: 14px; }
.mouse-label { color: #c9a84c; font-weight: bold; }
.mouse-desc { color: #5a5245; }

/* === 状态面板(技能树) === */
#stats-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85); z-index: 99;
  display: flex; align-items: center; justify-content: center;
}
#stats-overlay.hidden { display: none; }
.stats-panel {
  background: #12100e; border: 2px solid #3a3028; border-radius: 8px;
  max-width: 520px; width: 92%; max-height: 85vh; overflow-y: auto;
  font-size: 13px; color: #d4c5a9;
}
.stats-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid #2a2520;
  position: sticky; top: 0; background: #12100e; z-index: 1;
}
.stats-header h2 { font-size: 16px; color: #e0d0a0; margin: 0; }
.btn-close {
  background: none; border: 1px solid #3a3028; color: #d4c5a9;
  width: 28px; height: 28px; border-radius: 4px; cursor: pointer;
  font-size: 14px; transition: all 0.2s;
}
.btn-close:hover { background: #3a3028; color: #ffaa44; }
.stats-body { padding: 8px 16px 16px; }
.stats-section { margin-top: 12px; }
.stats-section-title {
  font-size: 14px; color: #c9a84c; margin-bottom: 6px;
  border-bottom: 1px solid #2a2520; padding-bottom: 4px;
}
.stats-hint { font-size: 11px; color: #5a5245; font-weight: normal; }
.stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px;
}
.stats-attr-row {
  display: flex; justify-content: space-between; padding: 3px 4px;
  font-size: 12px;
}
.stats-attr-row .label { color: #5a5245; }
.stats-attr-row .value { color: #d4c5a9; }
.stats-attr-row .value.high { color: #44ff88; }
.stats-attr-row .value.warn { color: #ff8844; }
.stats-attr-row .value.danger { color: #ff4444; }

/* === 系统信息面板指示器 === */
#sys-indicator {
  position: fixed; top: 80px; right: 16px;
  background: rgba(0,0,0,0.55);
  color: #88cc88;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(136,204,136,0.2);
  pointer-events: none;
  z-index: 90;
  font-family: 'SimSun','FangSong',serif;
  transition: opacity 0.3s;
}
#sys-indicator.hidden { display: none; }
.stats-attr-row .value.spirit { color: #88ccff; }

/* 境界经验条 */
.stats-realm-bar {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
}
.stats-realm-name { color: #e0d0a0; font-size: 14px; min-width: 60px; }
.stats-exp-bar-bg {
  flex: 1; height: 10px; background: #1a1815; border-radius: 5px;
  overflow: hidden; position: relative;
}
.stats-exp-bar-fill {
  height: 100%; border-radius: 5px; transition: width 0.3s;
  background: linear-gradient(90deg, #6644aa, #aa88ff);
}
.stats-exp-text {
  position: absolute; right: 4px; top: -1px; font-size: 9px;
  color: #fff; text-shadow: 0 1px 2px #000;
}
.stats-total-exp { color: #5a5245; font-size: 11px; margin-top: 4px; }
.stats-break-btn {
  display: block; margin: 8px auto 0; padding: 6px 20px;
  border: 1px solid #c9a84c; border-radius: 6px;
  background: linear-gradient(180deg, #2a2218, #1a1520);
  color: #ffdb7a; font-size: 13px; cursor: pointer;
  text-shadow: 0 0 8px rgba(201,168,76,0.3);
  transition: all 0.3s;
}
.stats-break-btn:hover { background: linear-gradient(180deg, #3a3228, #2a2530); color: #ffcc55; box-shadow: 0 0 12px rgba(201,168,76,0.3); }

/* 技能卡片 */
.skill-card {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin: 3px 0;
  background: #0f0d0a; border: 1px solid #1a1815; border-radius: 4px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.skill-card:hover { border-color: #3a3028; background: #12100d; }
.skill-card.can-upgrade { border-color: #2a4a20; background: #0f1a0a; }
.skill-card.can-upgrade:hover {
  border-color: #44aa44; background: #122a10;
  box-shadow: 0 0 8px rgba(68,170,68,0.2);
}
.skill-card.locked {
  opacity: 0.55;
  border-color: rgba(255,80,80,0.15);
  background: rgba(255,0,0,0.04);
}
.skill-icon { width: 28px; height: 28px; border-radius: 4px; display: flex;
  align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.skill-icon.active-color { background: #1a2a1a; border: 1px solid #44aa44; }
.skill-icon.passive-color { background: #1a1a2a; border: 1px solid #4444aa; }
.skill-info { flex: 1; min-width: 0; }
.skill-name { font-size: 12px; color: #e0d0a0; }
.skill-level { font-size: 11px; color: #5a5245; }
/* === 底部修为显示 — 渐变背景 + 渐变文字 + 光束扫过动画 === */
#skill-exp-text-only {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 3px 14px 4px 14px; margin: 0 auto;
  border-radius: 10px;
  /* 渐变背景 — 深色底座，微微泛光 */
  background: linear-gradient(135deg, #1a1814 0%, #1e1c18 40%, #221e19 100%);
  border: 1px solid rgba(120, 100, 60, 0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  overflow: hidden; /* 裁剪光束动画 */
  transition: border-color 0.15s;
}
#skill-exp-text-only .skill-exp-label {
  font-size: 11px; color: #6a5e48; white-space: nowrap;
  letter-spacing: 1px;
}
#skill-exp-text-only .skill-exp-value {
  font-size: 13px; font-weight: bold; white-space: nowrap;
  /* 渐变文字：从暗金到亮金 */
  background: linear-gradient(180deg, #d4b870 0%, #f0d87c 30%, #d4b870 70%, #a08850 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* 文字发光 */
  text-shadow: none; /* text-shadow 会破坏 background-clip 效果，用 filter 替代 */
  filter: drop-shadow(0 1px 2px rgba(180, 140, 60, 0.3));
  transition: filter 0.3s;
  position: relative; z-index: 2; /* 在光束之上 */
}

/* === 光束扫过效果 === */
/* 正数: 金色光束 */
#skill-exp-text-only::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  z-index: 1;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 220, 140, 0.08) 30%,
    rgba(255, 240, 200, 0.35) 50%,
    rgba(255, 220, 140, 0.08) 70%,
    transparent 100%
  );
  pointer-events: none;
  opacity: 0;
  border-radius: 0; /* 覆盖任何可能的圆角 */
}

/* 光束触发动画 — 正向（修为增加） */
#skill-exp-text-only.beam-gain::after {
  animation: cultBeamGain 0.55s ease-out forwards;
}

/* 光束触发动画 — 负向（修为减少） */
#skill-exp-text-only.beam-loss::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 80, 80, 0.06) 30%,
    rgba(255, 100, 80, 0.3) 50%,
    rgba(255, 80, 80, 0.06) 70%,
    transparent 100%
  );
  animation: cultBeamLoss 0.55s ease-out forwards;
}

@keyframes cultBeamGain {
  0%   { left: -100%; opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes cultBeamLoss {
  0%   { left: -100%; opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* 光束触发时容器边框微闪 */
#skill-exp-text-only.beam-gain {
  border-color: rgba(200, 160, 60, 0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 0 10px rgba(200, 160, 60, 0.15);
}

#skill-exp-text-only.beam-loss {
  border-color: rgba(220, 80, 60, 0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 0 10px rgba(200, 60, 40, 0.12);
}
.skill-exp-bar { height: 6px; background: #2a2825; border-radius: 3px; overflow: hidden; margin: 2px 0; }
.skill-exp-fill { height: 100%; background: linear-gradient(90deg, #446644, #66aa44); border-radius: 2px; transition: width 0.3s; }
.skill-btn {
  padding: 3px 10px; border-radius: 4px; border: 1px solid #3a3028;
  background: #1a1815; color: #c9a84c; font-size: 11px; cursor: pointer;
  white-space: nowrap; transition: all 0.15s;
  pointer-events: auto;
}
.skill-btn:hover { background: #3a3028; color: #ffaa44; }
.skill-btn:active { background: #4a3f30; }
.skill-btn.ready {
  background: #1a2a10; border-color: #44aa44; color: #66cc44;
  font-weight: bold;
}
.skill-btn.ready:hover { background: #2a4a20; border-color: #66cc66; color: #88ee66; }
.skill-btn.btn-disabled { opacity: 0.5; cursor: pointer; }
.skill-btn.btn-disabled:hover { opacity: 0.7; }
.skill-btn:disabled, .skill-btn.disabled { opacity: 0.4; cursor: not-allowed; }
.skill-btn.maxed { color: #5a5245; border-color: #2a2520; cursor: default; }
.skill-btn.maxed:hover { background: #1a1815; }

/* 操作提示栏 */
.click-info {
  display: flex; gap: 10px; font-size: 11px; color: #5a5245;
  align-items: center;
}
.click-info span { white-space: nowrap; }
.click-info span:nth-child(1) { color: #e8d8aa; }
.click-info span:nth-child(2) { color: #aad8e8; }
.click-info span:nth-child(3),
.click-info span:nth-child(4) { color: #8888a8; }

/* 修炼槽（新1格统一样式，复用skill-slot） */
.cult-slot-new {
  width: 44px; height: 40px;
}
.cult-slot-new .slot-icon { font-size: 14px; }
.cult-slot-new .slot-name { font-size: 8px; }
.skill-cost { font-size: 10px; color: #5a5245; }

/* === 鼠标左右键槽 === */
.lr-slot { background: linear-gradient(135deg, #2a2218, #1a1814) !important; border: 1px solid #6a5a3a !important; }
.lr-slot .slot-icon { font-size: 14px; }
.lr-slot .slot-name { font-size: 11px; color: #c8b88a; }
.lr-slot .slot-key { font-size: 9px; color: #8a7a5a; }

/* === 左键/右键技能槽 === */
.lr-slot {
  width: 32px; height: 32px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: bold; color: #a89870;
  border: 1px solid #3a3530; cursor: pointer;
  background: #0d0b08; position: relative;
}
.lr-slot.lmb { border-color: #5a7a5a; background: #0d1208; }
.lr-slot.rmb { border-color: #7a5a5a; background: #120808; }
.lr-slot .lr-label {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-size: 8px; color: #5a5245; white-space: nowrap;
}
.lr-slot:hover { border-color: #8a7a5a; box-shadow: 0 0 6px rgba(120,100,60,0.3); }


/* === 统一右键上下文菜单 === */
#game-context-menu {
  position: fixed; z-index: 1001;
  background: #1a1612; border: 1px solid #4a3a2a; border-radius: 6px;
  min-width: 140px; padding: 4px; box-shadow: 0 4px 20px rgba(0,0,0,0.7);
  display: none;
  font-family: 'KaiTi','SimSun',serif;
}
#game-context-menu.visible { display: block; }
.ctx-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; cursor: pointer; font-size: 13px; color: #c8b88a;
  border-radius: 4px; transition: all 0.1s;
}
.ctx-menu-item:hover { background: #2a2218; color: #e8d8b0; }
.ctx-menu-item .ctx-item-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.ctx-menu-item .ctx-item-label { flex: 1; }
.ctx-menu-item .ctx-item-hint {
  font-size: 10px; color: #5a5245; margin-left: 8px; flex-shrink: 0;
}
.ctx-menu-divider { height: 1px; background: #2a2218; margin: 3px 4px; }
.ctx-menu-item.ctx-danger { color: #e07060; }
.ctx-menu-item.ctx-danger:hover { background: #3a1010; color: #ff8888; }

/* 旧的右键菜单（已废弃，保留兼容） */
#skill-context-menu, #cult-context-menu { display: none !important; }
.ctx-menu-title { display: none; }
.ctx-lvl { color: #5a5245; font-size: 10px; }

/* === 技能选择面板（左键点击空槽位弹出）=== */
#skill-select-panel {
  position: fixed; z-index: 1000;
  background: #1a1612; border: 1px solid #4a3f30; border-radius: 6px;
  min-width: 150px; max-width: 200px; max-height: 280px; overflow-y: auto;
  padding: 4px; box-shadow: 0 4px 20px rgba(0,0,0,0.7);
}
#skill-select-panel.hidden { display: none; }
.skill-select-title {
  font-size: 11px; color: #8a7a60; padding: 4px 8px;
  border-bottom: 1px solid #2a2218; margin-bottom: 2px;
}
.skill-select-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; cursor: pointer; font-size: 12px;
  color: #d0c0a0; border-radius: 3px;
  transition: background 0.1s;
}
.skill-select-item:hover { background: #2a2218; color: #e8d8b0; }
.skill-select-item.talisman-item {
  color: #ffaa44;
}
.skill-select-item.talisman-item:hover {
  background: #3a2010; color: #ffcc66;
}
.skill-select-empty {
  padding: 12px 8px; text-align: center; font-size: 11px;
  color: #5a5245;
}

/* 符箓标签 */
.talisman-tag {
  display: inline-block;
  padding: 0 3px; font-size: 9px; font-weight: bold;
  background: #6a3020; color: #ffaa44;
  border-radius: 2px; line-height: 1.4;
}

/* === 锁定槽位样式 === */

/* === 选择面板分类标签 === */
.skill-select-tabs {
  display: flex; gap: 1px; padding: 3px 4px 0;
  border-bottom: 1px solid #2a2218; margin-bottom: 4px;
  background: #0e0c0a; border-radius: 4px 4px 0 0;
}
.skill-select-tab {
  padding: 3px 10px; font-size: 10px; cursor: pointer;
  color: #6a5a4a; border-radius: 3px 3px 0 0;
  transition: all 0.15s; user-select: none;
  border: 1px solid transparent; border-bottom: none;
}
.skill-select-tab:hover {
  color: #c9a84c; background: #1a1612;
}
.skill-select-tab.active {
  color: #ffaa44; background: #1a1612;
  border-color: #2a2218; font-weight: bold;
}

/* === 清空槽按钮 === */
.skill-select-item.skill-select-clear {
  color: #dd5555 !important;
  font-weight: bold; text-align: center;
  border-bottom: 1px solid #2a1818; margin-bottom: 3px;
}
.skill-select-item.skill-select-clear:hover {
  background: #2a1010 !important; color: #ff4444 !important;
}

/* === 物品选择项 === */
.skill-select-item.equip-item {
  color: #88ccff;
}
.skill-select-item.equip-item:hover {
  background: #102030; color: #aaddff;
}
/* 修炼品类 */
.skill-select-item.equip-item.cult-item {
  color: #b088e8;
}
.skill-select-item.equip-item.cult-item:hover {
  background: #181028; color: #cca0ff;
}

/* 修炼物品右键菜单 - 复用技能菜单样式 */
#cult-context-menu { position: fixed; z-index: 1000;
  background: #1a1612; border: 1px solid #3a3228; border-radius: 6px;
  min-width: 140px; padding: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.6); }
#cult-context-menu.hidden { display: none; }
#cult-menu-list .ctx-menu-item { display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; cursor: pointer; font-size: 12px; color: #d0c0a0;
  border-radius: 3px; }
#cult-menu-list .ctx-menu-item:hover { background: #2a2218; color: #e8d8b0; }

/* === 死亡面板 === */
#death-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 2000; display: flex; align-items: center; justify-content: center; }
#death-overlay.hidden { display: none; }
.death-backdrop { position: absolute; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.75); }
.death-panel { position: relative; background: #1a1218; border: 2px solid #4a2030;
  border-radius: 14px; padding: 30px 40px; text-align: center;
  min-width: 280px; box-shadow: 0 0 40px rgba(120, 20, 40, 0.3); }
.death-title { font-size: 28px; color: #cc4444; font-weight: bold;
  margin-bottom: 20px; letter-spacing: 8px; }
.death-stats { margin-bottom: 24px; }
.death-stat { display: flex; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid #2a1820; }
.death-label { color: #886666; font-size: 13px; }
.death-value { color: #ddaaaa; font-size: 13px; font-weight: bold; }
.death-btn { display: inline-block; padding: 10px 40px; background: #6a2030;
  color: #ff8888; border-radius: 8px; cursor: pointer; font-size: 16px;
  font-weight: bold; letter-spacing: 4px;
  border: 1px solid #8a3040; transition: all 0.2s; }
.death-btn:hover { background: #8a2840; color: #ffaaaa;
  box-shadow: 0 0 20px rgba(180, 40, 60, 0.4); }

/* === God 模式物品浏览器 === */
#god-panel {
  position: fixed; top: 10px; right: 10px; bottom: 10px; width: 320px;
  z-index: 1500; background: #141110; border: 2px solid #5a3a20;
  border-radius: 10px; display: flex; flex-direction: column;
  box-shadow: 0 0 30px rgba(200, 140, 40, 0.25);
  font-size: 12px; color: #c8b080; overflow: hidden;
}
#god-panel.hidden { display: none; }
.god-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: #1a1410; border-bottom: 1px solid #2a2018;
  font-weight: bold; font-size: 14px; color: #e0b860;
}
.god-panel-close {
  cursor: pointer; font-size: 16px; color: #8a6040; padding: 0 4px;
  transition: color 0.15s;
}
.god-panel-close:hover { color: #ff6644; }
.god-panel-search {
  display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid #1a1410;
}
.god-panel-search input {
  flex: 1; background: #1a1410; border: 1px solid #2a2018; border-radius: 4px;
  padding: 4px 8px; color: #d0c0a0; font-size: 11px; outline: none;
}
.god-panel-search input:focus { border-color: #5a3a20; }
.god-panel-search input::placeholder { color: #4a3a28; }
#god-search-clear {
  background: none; border: 1px solid #2a2018; color: #6a5040;
  border-radius: 4px; cursor: pointer; padding: 2px 6px; font-size: 12px;
}
#god-search-clear:hover { color: #cc6644; }
.god-panel-tabs {
  display: flex; gap: 2px; padding: 4px 6px; border-bottom: 1px solid #1a1410;
  overflow-x: auto;
}
.god-tab {
  padding: 3px 10px; border-radius: 4px; cursor: pointer; color: #5a4a38;
  white-space: nowrap; transition: all 0.15s; font-size: 11px;
}
.god-tab:hover { color: #c8a848; background: #1a1410; }
.god-tab.active { color: #ffaa44; background: #2a1a10; font-weight: bold; }
.god-panel-content {
  flex: 1; overflow-y: auto; padding: 4px 6px;
}
/* 分类标题 */
.god-cat-title {
  color: #8a6040; font-size: 11px; font-weight: bold; padding: 6px 4px 2px;
  border-bottom: 1px solid #1a1410; margin-bottom: 4px; letter-spacing: 2px;
}
/* 物品行 */
.god-item-row {
  display: flex; align-items: center; gap: 6px; padding: 3px 6px;
  border-radius: 4px; cursor: pointer; transition: background 0.12s;
}
.god-item-row:hover { background: #1e1a14; }
.god-item-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
.god-item-name { flex: 1; font-size: 11px; }
.god-item-type { font-size: 9px; color: #4a3a28; padding: 0 4px; flex-shrink: 0; }
.god-item-add {
  padding: 1px 8px; background: #2a1a10; color: #c8a848; border-radius: 3px;
  border: 1px solid #3a2a18; cursor: pointer; font-size: 10px;
  transition: all 0.12s; flex-shrink: 0;
}
.god-item-add:hover { background: #3a2a14; color: #ffcc66; border-color: #5a3a20; }
/* 装备按钮(紫调) */
.god-item-equip {
  padding: 1px 8px; background: #1a1028; color: #b088e8; border-radius: 3px;
  border: 1px solid #2a1838; cursor: pointer; font-size: 10px;
  transition: all 0.12s; flex-shrink: 0;
}
.god-item-equip:hover { background: #281840; color: #cca0ff; border-color: #4a2880; }
.god-panel-footer {
  display: flex; gap: 6px; padding: 6px 8px; border-top: 1px solid #1a1410;
}
.god-btn {
  flex: 1; padding: 5px 0; border-radius: 4px; border: 1px solid #3a2a18;
  background: #1a1410; color: #c8a848; cursor: pointer; font-size: 11px;
  transition: all 0.15s; white-space: nowrap;
}
.god-btn:hover { background: #2a1a10; color: #ffcc66; }
.god-btn-alt { color: #88aacc; border-color: #1a2a38; }
.god-btn-alt:hover { color: #aaccff; background: #101a2a; }

/* 数量微调器(god面板专用) */
.god-qty {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.god-qty button {
  width: 16px; height: 16px; border: 1px solid #2a2018; background: #1a1410;
  color: #6a5040; font-size: 9px; cursor: pointer; border-radius: 2px;
  line-height: 1; padding: 0;
}
.god-qty button:hover { color: #c8a848; border-color: #4a3a20; }
.god-qty input {
  width: 28px; height: 16px; background: #0a0806; border: 1px solid #2a2018;
  color: #c8b080; font-size: 10px; text-align: center; border-radius: 2px;
  outline: none;
}
.god-qty input:focus { border-color: #5a3a20; }

/* God模式屏幕提示 */
#god-mode-indicator {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) translateY(40px);
  color: #ffcc66; font-size: 20px; font-weight: bold; pointer-events: none;
  z-index: 1499; opacity: 0; transition: opacity 0.5s;
  text-shadow: 0 0 20px rgba(200,150,50,0.6); letter-spacing: 8px;
}

/* === 欢迎弹窗 === */
#welcome-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.9); z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
#welcome-overlay.hidden { display: none; }
.welcome-card {
  background: linear-gradient(135deg, #12100e 0%, #1a1815 100%);
  border: 2px solid #3a3028; border-radius: 12px;
  padding: 30px 36px; max-width: 440px; width: 90%;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8);
}
.welcome-title { font-size: 28px; color: #c9a84c; font-weight: bold; margin-bottom: 4px; }
.welcome-subtitle { font-size: 14px; color: #6a5e4b; margin-bottom: 20px; }
.welcome-guide { text-align: left; }
.welcome-section { margin-bottom: 14px; }
.welcome-label { font-size: 13px; color: #c9a84c; font-weight: bold; margin-bottom: 4px; }
.welcome-row { font-size: 12px; color: #a09080; line-height: 1.8; }
.welcome-row kbd {
  background: #2a2520; border: 1px solid #4a3f30; border-radius: 3px;
  padding: 1px 5px; font-family: inherit; font-size: 11px; color: #e0c060;
}
.welcome-btn {
  margin-top: 18px; padding: 10px 40px;
  background: #2a3a2a; border: 1px solid #5a8a3a; border-radius: 6px;
  color: #88cc88; font-size: 16px; cursor: pointer;
  transition: all 0.3s; font-family: inherit;
}
.welcome-btn:hover { background: #3a4a3a; }

/* === 任务面板 === */
#quest-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85); z-index: 95;
  display: flex; align-items: center; justify-content: center;
}
#quest-overlay.hidden { display: none; }
.quest-panel {
  background: #12100e; border: 2px solid #3a3028; border-radius: 8px;
  width: 420px; max-height: 70vh; overflow-y: auto;
}
.quest-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid #2a2520;
  position: sticky; top: 0; background: #12100e; z-index: 1;
  font-size: 15px; color: #c9a84c; font-weight: bold;
}
.quest-body { padding: 10px 14px 14px; }
.quest-card {
  padding: 10px 12px; margin-bottom: 8px;
  background: #1a1815; border: 1px solid #2a2520; border-radius: 6px;
}
.quest-card.active { border-color: #c9a84c; }
.quest-card.completed { border-color: #3a5a3a; opacity: 0.6; }
.quest-name { font-size: 14px; color: #c9a84c; font-weight: bold; margin-bottom: 4px; }
.quest-completed .quest-name { color: #88cc88; }
.quest-desc { font-size: 12px; color: #8a7e6b; margin-bottom: 6px; }
.quest-progress { font-size: 12px; color: #d4c5a9; }
.quest-progress-bar {
  height: 6px; background: #2a2520; border-radius: 3px; margin-top: 4px; overflow: hidden;
}
.quest-progress-fill {
  height: 100%; background: #c9a84c; border-radius: 3px; transition: width 0.3s;
}
.quest-reward { font-size: 11px; color: #88cc88; margin-top: 4px; }
.quest-card-btns { margin-top: 6px; display: flex; gap: 6px; }
.quest-btn {
  padding: 3px 10px; border: 1px solid #3a3028; border-radius: 4px;
  background: #1a1815; color: #8a7e6b; font-size: 11px; cursor: pointer;
  transition: all 0.2s; font-family: inherit;
}
.quest-btn:hover { background: #2a2520; }
.quest-btn.abandon { color: #cc6666; border-color: #5a3a3a; }
.quest-btn.abandon:hover { background: #3a2a2a; }
.quest-empty { text-align: center; color: #5a5245; padding: 20px; font-size: 13px; }

/* === NPC 对话框 === */
#npc-dialog-panel {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 90;
}
#npc-dialog-panel.hidden { display: none; }
.npc-dialog-card {
  background: #12100e; border: 2px solid #3a3028; border-radius: 8px;
  width: 420px; max-height: 350px; overflow-y: auto;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
.npc-dialog-header {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid #2a2520; background: #1a1815;
}
.npc-dialog-avatar { font-size: 28px; }
.npc-dialog-info { flex: 1; }
#npc-dialog-name { font-size: 14px; font-weight: bold; color: #c9a84c; display: block; }
.npc-dialog-subtitle { font-size: 11px; color: #8a7e6b; }
.npc-dialog-close {
  background: none; border: 1px solid #3a3028; color: #8a7e6b;
  width: 26px; height: 26px; border-radius: 4px; cursor: pointer;
  font-size: 14px; transition: all 0.2s;
}
.npc-dialog-close:hover { background: #3a2020; color: #cc6666; }
.npc-dialog-body { padding: 12px 14px 14px; }
#npc-dialog-text { font-size: 13px; color: #d4c5a9; line-height: 1.6; margin-bottom: 12px; }
.npc-dialog-options { display: flex; flex-direction: column; gap: 4px; }
.npc-dialog-option {
  padding: 8px 12px; background: #1a1815; border: 1px solid #2a2520;
  border-radius: 4px; color: #c9a84c; font-size: 13px; cursor: pointer;
  text-align: left; transition: all 0.2s; font-family: inherit;
}
.npc-dialog-option:hover { background: #2a2520; border-color: #4a3f30; color: #e0c060; }

/* === 交易面板 === */
#trade-panel {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 91;
}
#trade-panel.hidden { display: none; }
.trade-card {
  background: #12100e; border: 2px solid #3a3028; border-radius: 8px;
  width: 340px; max-height: 450px; overflow-y: auto;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
.trade-header {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid #2a2520; background: #1a1815;
  font-size: 14px; color: #c9a84c; font-weight: bold;
}
.trade-gold-label { margin-left: auto; font-size: 12px; color: #8a7e6b; font-weight: normal; }
.trade-gold-value { font-size: 14px; color: #f0d060; }
.trade-close-btn {
  background: none; border: 1px solid #3a3028; color: #8a7e6b;
  width: 26px; height: 26px; border-radius: 4px; cursor: pointer; font-size: 14px;
}
.trade-close-btn:hover { background: #3a2020; color: #cc6666; }
.trade-body { padding: 10px; }
.trade-list { display: flex; flex-direction: column; gap: 4px; }
.trade-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: #1a1815; border: 1px solid #2a2520; border-radius: 4px;
}
.trade-icon { font-size: 20px; }
.trade-name { flex: 1; font-size: 13px; color: #d4c5a9; }
.trade-price { font-size: 12px; color: #f0d060; }
.trade-buy-btn {
  padding: 4px 12px; background: #2a3a2a; border: 1px solid #3a5a3a;
  border-radius: 4px; color: #88cc88; font-size: 12px; cursor: pointer;
  transition: all 0.2s; font-family: inherit;
}
.trade-buy-btn:hover { background: #3a4a3a; }

/* === 悬停Tooltip === */
#game-tooltip {
  position: fixed; z-index: 3000; padding: 8px 12px;
  background: #141110; border: 1px solid #5a3a20; border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.7); pointer-events: none;
  min-width: 160px; max-width: 280px;
  font-size: 11px; line-height: 1.5; color: #c8b080;
  transition: opacity 0.12s;
}
#game-tooltip.hidden { opacity: 0; }
.tooltip-name { font-size: 13px; font-weight: bold; color: #e0c060; margin-bottom: 4px; }
.tooltip-desc { font-size: 10px; color: #8a7a5a; margin-bottom: 4px; line-height: 1.4; }
.tooltip-stats { font-size: 10px; color: #a09070; }
.tooltip-stats .tt-row { display: flex; justify-content: space-between; gap: 12px; padding: 1px 0; }
.tooltip-stats .tt-label { color: #6a5e4b; }
.tooltip-stats .tt-value { color: #c8b080; }
.tooltip-stats .tt-value.pos { color: #88cc88; }
.tooltip-stats .tt-value.neg { color: #cc8888; }
.tooltip-compare { margin-top: 6px; padding-top: 6px; border-top: 1px solid #2a2218; }
.tooltip-compare .tt-comp-title { font-size: 10px; color: #6a5e4b; margin-bottom: 3px; }
.tooltip-compare .tt-row { display: flex; justify-content: space-between; gap: 12px; padding: 1px 0; font-size: 10px; }
.tooltip-compare .tt-row.tt-curr .tt-value { color: #5a5245; }
.tooltip-compare .tt-diff { font-size: 9px; margin-left: 4px; }
.tooltip-compare .tt-diff.better { color: #88cc88; }
.tooltip-compare .tt-diff.worse { color: #cc8888; }
.tooltip-compare .tt-diff.same { color: #5a5245; }
.tooltip-quality { display: inline-block; padding: 0 4px; border-radius: 2px; font-size: 10px; margin-left: 4px; }
.tooltip-slot { font-size: 10px; color: #6a5e4b; margin-bottom: 2px; }