/* ============== 仙侠水墨画风覆盖层 ==============
 * 通过 body 前缀 + !important 覆盖各 UI 的 inline <style>
 * 不改 TS 逻辑,纯视觉层
 * 字体:Ma Shan Zheng(毛笔楷书) + Noto Serif SC(宋体)
 * 色调:宣纸米黄 + 墨色 + 朱砂红 + 金箔黄
 * ================================================= */

@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&family=Noto+Serif+SC:wght@400;700;900&display=swap');

/* ============== 字体 ============== */
body {
  font-family: 'Noto Serif SC', 'STSong', 'SimSun', serif !important;
}

/* ============== 通用面板:宣纸纹理 + 墨色边 ============== */
body .char-card,
body .shop-card-wrap,
body .inv-wrap,
body .map-card,
body .upgrade-panel {
  background:
    radial-gradient(at 20% 10%, rgba(120, 70, 30, 0.08), transparent 60%),
    radial-gradient(at 85% 80%, rgba(40, 25, 15, 0.10), transparent 70%),
    radial-gradient(at 50% 50%, rgba(255, 240, 200, 0.4), transparent 80%),
    linear-gradient(180deg, #f5ead0 0%, #ead8b0 100%) !important;
  color: #1a1410 !important;
  border: 2px solid #0a0806 !important;
  border-radius: 4px !important;
  box-shadow:
    0 0 0 1px #f5ead0,
    0 0 0 5px #1a1410,
    0 0 0 6px #a02020,
    0 12px 40px rgba(0, 0, 0, 0.7) !important;
  font-family: 'Noto Serif SC', serif !important;
}

/* 装饰角章 */
body .char-card::before,
body .shop-card-wrap::before,
body .inv-wrap::before {
  content: '仙' !important;
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 38px !important;
  height: 38px !important;
  background: #a02020 !important;
  color: #fff8e8 !important;
  font-family: 'Ma Shan Zheng', cursive !important;
  font-size: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 3px !important;
  transform: rotate(-4deg) translateY(-2px) !important;
  box-shadow: 1px 2px 3px rgba(0,0,0,0.3) !important;
  z-index: 2 !important;
  letter-spacing: 0 !important;
}
body .char-card,
body .shop-card-wrap,
body .inv-wrap {
  position: relative !important;
}

/* ============== 大标题:毛笔字 + 朱砂印章 ============== */
body .char-title,
body .shop-title,
body .map-title,
body .upgrade-panel h2 {
  font-family: 'Ma Shan Zheng', 'STKaiti', cursive !important;
  color: #1a1410 !important;
  font-size: 32px !important;
  letter-spacing: 12px !important;
  text-shadow: 1px 1px 0 rgba(160, 32, 32, 0.2) !important;
  padding-right: 50px !important;
}

/* ============== 区块小标题 ============== */
body .char-section-title,
body .shop-sub {
  font-family: 'Ma Shan Zheng', cursive !important;
  font-size: 20px !important;
  color: #1a1410 !important;
  border-left: 4px solid #a02020 !important;
  padding: 4px 0 4px 14px !important;
  letter-spacing: 6px !important;
  background: linear-gradient(90deg, rgba(160, 32, 32, 0.10), transparent 70%) !important;
  margin-bottom: 12px !important;
}

/* ============== 数据行 ============== */
body .char-row {
  border-bottom: 1px dashed rgba(40, 25, 15, 0.2) !important;
  padding: 6px 4px !important;
  font-size: 15px !important;
}

body .char-num,
body .shop-price,
body .shop-coins-display,
body .inv-count-display,
body .inv-stack {
  color: #8b4a1c !important;
  font-weight: 700 !important;
  font-family: 'Noto Serif SC', serif !important;
}

body .realm-name {
  color: #a02020 !important;
  font-family: 'Ma Shan Zheng', cursive !important;
  letter-spacing: 4px !important;
}

body .char-num.done {
  color: #2a6e3a !important;
}

/* ============== 按钮:墨色 / 朱砂 ============== */
body .char-close,
body #resetSaveBtn,
body .close-btn,
body #closeCharBtn,
body #closeShopBtn,
body #closeInvBtn,
body #closeMapBtn,
body #cultivateCancelBtn,
body #bossLeaveBtn,
body .cultivate-cancel-btn {
  font-family: 'Ma Shan Zheng', cursive !important;
  background: linear-gradient(135deg, #2a2520 0%, #1a1410 100%) !important;
  color: #f5ead0 !important;
  border: 1px solid #0a0806 !important;
  border-radius: 3px !important;
  padding: 7px 16px !important;
  font-size: 14px !important;
  letter-spacing: 4px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 0 6px rgba(245,234,208,0.1) !important;
  transition: all 0.15s !important;
}
body .char-close:hover,
body #resetSaveBtn:hover,
body .close-btn:hover,
body #closeCharBtn:hover,
body #closeShopBtn:hover,
body #closeInvBtn:hover,
body #closeMapBtn:hover,
body #cultivateCancelBtn:hover:not(:disabled),
body #bossLeaveBtn:hover:not(:disabled) {
  background: linear-gradient(135deg, #3a3530, #2a2520) !important;
  transform: translateY(-1px) !important;
}
body #resetSaveBtn {
  background: linear-gradient(135deg, #6a1818 0%, #4a1010 100%) !important;
  color: #ffe0c0 !important;
  border-color: #2a0808 !important;
}

/* 主要按钮:朱砂红印章感 */
body .shop-buy-btn,
body .inv-use-btn,
body .cultivate-btn,
body .boss-btn {
  font-family: 'Ma Shan Zheng', cursive !important;
  background: linear-gradient(135deg, #a02020 0%, #801818 100%) !important;
  color: #fff8e8 !important;
  border: 1px solid #4a0a0a !important;
  border-radius: 3px !important;
  padding: 8px 18px !important;
  font-size: 14px !important;
  letter-spacing: 4px !important;
  cursor: pointer !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.4),
    inset 0 0 6px rgba(255,200,160,0.2),
    inset 0 0 0 1px rgba(255,240,200,0.15) !important;
  transition: all 0.15s !important;
  position: relative !important;
}
body .shop-buy-btn:hover:not(:disabled),
body .inv-use-btn:hover:not(:disabled),
body .cultivate-btn:hover:not(:disabled),
body .boss-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b82828 0%, #901c1c 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(160, 32, 32, 0.5), inset 0 0 8px rgba(255,200,160,0.3) !important;
}
body .shop-buy-btn:disabled,
body .inv-use-btn:disabled,
body .cultivate-btn:disabled,
body .boss-btn:disabled,
body #bossEnterLevelBtn:disabled,
body #bossEnterSummonBtn:disabled,
body #bossEnterWalkBtn:disabled {
  background: linear-gradient(135deg, #4a4540, #3a3530) !important;
  color: #807870 !important;
  border-color: #2a2520 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* 丢弃按钮:暗墨 */
body .inv-drop-btn {
  font-family: 'Ma Shan Zheng', cursive !important;
  background: rgba(60, 50, 40, 0.6) !important;
  color: #c0a080 !important;
  border: 1px solid #1a1410 !important;
  border-radius: 3px !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
}

body #invSortBtn {
  font-family: 'Ma Shan Zheng', cursive !important;
  background: linear-gradient(135deg, #2a4538 0%, #1a3528 100%) !important;
  color: #d8e8c0 !important;
  border: 1px solid #0a1a10 !important;
  border-radius: 3px !important;
  letter-spacing: 4px !important;
}

/* ============== 物品/技能 chip ============== */
body .char-skill-chip {
  background: rgba(40, 25, 15, 0.1) !important;
  border: 1px solid #4a3520 !important;
  color: #1a1410 !important;
  font-family: 'Ma Shan Zheng', cursive !important;
  letter-spacing: 2px !important;
  padding: 4px 12px !important;
  border-radius: 2px !important;
}

/* 稀有度边框改为墨色深浅 */
body .shop-card.rarity-common,
body .inv-card.rarity-common {
  border-color: #5a4530 !important;
}
body .shop-card.rarity-rare,
body .inv-card.rarity-rare {
  border-color: #2a5a8a !important;
  box-shadow: 0 0 6px rgba(60, 100, 160, 0.3) !important;
}
body .shop-card.rarity-epic,
body .inv-card.rarity-epic {
  border-color: #6a2858 !important;
  box-shadow: 0 0 10px rgba(140, 60, 120, 0.4) !important;
}
body .shop-card.rarity-legend,
body .inv-card.rarity-legend {
  border-color: #a02020 !important;
  box-shadow: 0 0 14px rgba(255, 200, 80, 0.5) !important;
  background: linear-gradient(135deg, rgba(255, 220, 100, 0.15), rgba(160, 32, 32, 0.08)) !important;
}

body .shop-name,
body .inv-name {
  font-family: 'Ma Shan Zheng', cursive !important;
  color: #1a1410 !important;
  letter-spacing: 2px !important;
}
body .shop-desc,
body .inv-desc {
  color: #5a4530 !important;
  font-style: italic !important;
}

/* ============== 头部背景 ============== */
body .char-header,
body .shop-header {
  border-bottom: 2px solid #1a1410 !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
  background: linear-gradient(180deg, rgba(160, 32, 32, 0.06), transparent) !important;
  padding-top: 8px !important;
}

/* ============== 死亡画面/升级面板也跟着改 ============== */
body #deathPanel,
body #upgradePanel {
  background:
    radial-gradient(at 30% 30%, rgba(120, 70, 30, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(245, 234, 208, 0.97), rgba(220, 200, 160, 0.97)) !important;
  color: #1a1410 !important;
  border: 2px solid #0a0806 !important;
  border-radius: 4px !important;
  box-shadow: 0 0 0 4px #a02020, 0 12px 40px rgba(0,0,0,0.7) !important;
}

/* ============== Toast 提示(毛笔字 + 卷轴感) ============== */
body .toast-item {
  font-family: 'Ma Shan Zheng', cursive !important;
  background: linear-gradient(135deg, rgba(20, 15, 10, 0.92), rgba(40, 30, 20, 0.92)) !important;
  color: #f5ead0 !important;
  border: 1px solid #f5ead0 !important;
  border-radius: 2px !important;
  padding: 8px 20px !important;
  font-size: 16px !important;
  letter-spacing: 4px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6), inset 0 0 8px rgba(245,234,208,0.1) !important;
  margin-bottom: 6px !important;
}

/* ============== 浮动伤害数字(毛笔感) ============== */
body .float-text {
  font-family: 'Ma Shan Zheng', cursive !important;
  font-weight: 900 !important;
  text-shadow:
    2px 2px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000 !important;
}

/* ============== 顶部 HUD 血条/经验条(细黑边 + 朱砂填充) ============== */
body .hp-fill {
  background: linear-gradient(180deg, #d04040 0%, #8a1818 100%) !important;
  border-right: 1px solid #1a1410 !important;
}
body .exp-fill {
  background: linear-gradient(180deg, #c8a040 0%, #8a6818 100%) !important;
  border-right: 1px solid #1a1410 !important;
}
body .stamina-fill {
  background: linear-gradient(180deg, #50a058 0%, #286028 100%) !important;
}

/* HUD 文字 */
body #hudHpText,
body #hudLevel,
body #hudCoins,
body #hudKills,
body #hudTime {
  font-family: 'Ma Shan Zheng', cursive !important;
  color: #f5ead0 !important;
  text-shadow: 1px 1px 2px #000, 0 0 4px rgba(0,0,0,0.6) !important;
  letter-spacing: 2px !important;
}

/* ============== 升级卡牌(三选一) ============== */
body .upgrade-card {
  background:
    radial-gradient(at 30% 20%, rgba(120, 70, 30, 0.08), transparent 60%),
    linear-gradient(180deg, #f5ead0, #ead8b0) !important;
  border: 2px solid #1a1410 !important;
  border-radius: 4px !important;
  color: #1a1410 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}
body .upgrade-card.rarity-epic {
  border-color: #6a2858 !important;
  box-shadow: 0 0 14px rgba(140, 60, 120, 0.5) !important;
}
body .upgrade-card.rarity-rare {
  border-color: #2a5a8a !important;
}
body .upgrade-card .upgrade-name {
  font-family: 'Ma Shan Zheng', cursive !important;
  color: #1a1410 !important;
  letter-spacing: 4px !important;
}

/* ============== 背包空状态文字 ============== */
body .inv-empty,
body .char-empty {
  color: #6a5540 !important;
  font-family: 'Ma Shan Zheng', cursive !important;
  font-size: 18px !important;
  letter-spacing: 4px !important;
}

/* ============== 滚动条改墨色 ============== */
body .char-card::-webkit-scrollbar,
body .shop-card-wrap::-webkit-scrollbar,
body .inv-wrap::-webkit-scrollbar {
  width: 8px !important;
}
body .char-card::-webkit-scrollbar-track,
body .shop-card-wrap::-webkit-scrollbar-track,
body .inv-wrap::-webkit-scrollbar-track {
  background: rgba(40, 25, 15, 0.1) !important;
}
body .char-card::-webkit-scrollbar-thumb,
body .shop-card-wrap::-webkit-scrollbar-thumb,
body .inv-wrap::-webkit-scrollbar-thumb {
  background: #2a2520 !important;
  border-radius: 4px !important;
}

/* ============== 地图选择卡 ============== */
body .map-card-item,
body .map-btn {
  font-family: 'Ma Shan Zheng', cursive !important;
  background: linear-gradient(135deg, rgba(245, 234, 208, 0.95), rgba(220, 200, 160, 0.95)) !important;
  color: #1a1410 !important;
  border: 2px solid #1a1410 !important;
  border-radius: 3px !important;
  letter-spacing: 4px !important;
}
body .map-card-item:hover,
body .map-btn:hover {
  background: linear-gradient(135deg, rgba(255, 244, 220, 1), rgba(235, 215, 175, 1)) !important;
  box-shadow: 0 0 12px rgba(160, 32, 32, 0.3) !important;
}