.section-title{font-size:72px !important;color:#222 !important;font-weight:900 !important;letter-spacing:15px !important;}\n.feature-card-img{background:linear-gradient(135deg,#1a2a3a,#2a4a5a) !important;}
/* ===== 文字江湖 · 全局样式（图片化升级版） ===== */

:root {
  --ink-black: #1a1a1a;
  --ink-deep: #2c2c2c;
  --ink-gray: #5a5a5a;
  --ink-light: #8a8a8a;
  --paper: #f5f0e6;
  --paper-dark: #e8dfcf;
  --paper-aged: #d9cfbc;
  --vermilion: #c23a2b;
  --vermilion-deep: #9e2d20;
  --gold: #b8860b;
  --gold-light: #daa520;
  --jade: #4a7c59;
  --sword-blue: #3d5a80;
  --mystic-purple: #6b4c8a;

  --font-title: 'Ma Shan Zheng', 'ZCOOL XiaoWei', serif;
  --font-body: 'Noto Serif SC', serif;
  --font-seal: 'ZCOOL XiaoWei', serif;

  /* 素材图片路径（本地assets目录，避免外链失效） */
  --img-avatars: url('/assets/img/avatars.png');
  --img-equipment: url('/assets/img/equipment.png');
  --img-items: url('/assets/img/items.png');
  --img-ink-pattern: url('/assets/img/ink-pattern.jpg');
  --img-hero-bg: url('/assets/img/hero-bg.jpg');
  --img-login-bg: url('/assets/img/login-bg.jpg');
  --img-town-night: url('/assets/img/town-night.jpg');
  --img-secret-cave: url('/assets/img/secret-cave.jpg');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
}

#root {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--paper);
}


body {
  font-family: var(--font-body);
  color: var(--paper);
  background: var(--paper);
  line-height: 1.6;
}

/* ===== 素材图集工具类 ===== */
/* 头像图集：2行4列 */
.avatar-sprite {
  background-image: var(--img-avatars);
  background-size: 400% 400%;
  background-repeat: no-repeat;
}

/* 装备图集：3x3 */
.equip-sprite {
  background-image: var(--img-equipment);
  background-size: 300% 300%;
  background-repeat: no-repeat;
}

/* 物品图集：3x3 */
.item-sprite {
  background-image: var(--img-items);
  background-size: 300% 300%;
  background-repeat: no-repeat;
}

/* 木质面板背景（CSS质感替代图片） */
.wood-panel {
  background: 
    linear-gradient(180deg, rgba(245,240,230,0.92) 0%, rgba(232,223,207,0.95) 100%),
    repeating-linear-gradient(90deg, rgba(139,115,85,0.05) 0px, rgba(139,115,85,0.05) 2px, transparent 2px, transparent 8px);
  border: 2px solid #8b7355;
  box-shadow: 
    inset 0 0 20px rgba(139,115,85,0.2),
    0 8px 30px rgba(0,0,0,0.3);
}

/* 卷轴横幅（CSS质感替代图片） */
.scroll-banner {
  background: linear-gradient(180deg, var(--paper-dark) 0%, var(--paper-aged) 50%, var(--paper-dark) 100%);
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  padding: 20px 60px;
  text-align: center;
  position: relative;
}
.scroll-banner::before,
.scroll-banner::after {
  content: '';
  position: absolute;
  top: -8px;
  bottom: -8px;
  width: 30px;
  background: linear-gradient(180deg, #455a64 0%, #daa520 50%, #455a64 100%);
  border-radius: 4px;
}
.scroll-banner::before { left: -10px; }
.scroll-banner::after { right: -10px; }

/* ===== 水墨背景纹理 ===== */
.ink-bg {
  position: relative;
  background: linear-gradient(180deg, #f5f0e6 0%, #e8dfcf 50%, #d9cfbc 100%);
}

.ink-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(ellipse at 20% 30%, rgba(26,26,26,0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(26,26,26,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(194,58,43,0.02) 0%, transparent 60%);
  pointer-events: none;
}

/* ===== 飘雪/星尘特效 ===== */
.snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}

.snowflake {
  position: absolute;
  color: rgba(255, 255, 255, 0.6);
  user-select: none;
  font-size: 14px;
  animation: snowfall linear infinite;
}

@keyframes snowfall {
  0% {
    transform: translateY(-10vh) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% {
    transform: translateY(110vh) rotate(360deg);
    opacity: 0;
  }
}

/* 灵气粒子 */
.spirit-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(218,165,32,0.8) 0%, transparent 70%);
  border-radius: 50%;
  animation: spiritFloat linear infinite;
  pointer-events: none;
}

@keyframes spiritFloat {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  20% { opacity: 1; }
  80% { opacity: 0.6; }
  100% {
    transform: translateY(-100vh) translateX(20px) scale(0.5);
    opacity: 0;
  }
}

/* ===== 水墨晕染 ===== */
.ink-wash {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.15;
  pointer-events: none;
}

/* ===== 印章样式 ===== */
.seal {
  font-family: var(--font-seal);
  background: var(--vermilion);
  color: #fff;
  padding: 4px 10px;
  font-size: 12px;
  letter-spacing: 2px;
  transform: rotate(-3deg);
  display: inline-block;
  border: 2px solid var(--vermilion-deep);
}

.seal-large {
  font-size: 20px;
  padding: 8px 16px;
  letter-spacing: 4px;
}

/* ===== 按钮 ===== */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  padding: 12px 32px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  letter-spacing: 2px;
}

.btn-primary {
  background: linear-gradient(180deg, #d44535 0%, #b83324 100%);
  color: #fff;
  border: 1px solid var(--vermilion-deep);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0 4px 15px rgba(194,58,43,0.3);
}

.btn-primary:hover {
  background: linear-gradient(180deg, #e05040 0%, #c23a2b 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(194, 58, 43, 0.4);
}

.btn-secondary {
  background: linear-gradient(180deg, rgba(245,240,230,0.9) 0%, rgba(217,207,188,0.9) 100%);
  color: var(--ink-black);
  border: 1px solid var(--ink-black);
}

.btn-secondary:hover {
  background: var(--ink-black);
  color: var(--paper);
}

.btn-ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--paper);
}

.btn-ghost:hover {
  background: var(--paper);
  color: var(--ink-black);
}

/* ===== 导航栏 ===== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px;
  z-index: 100;
  background: rgba(26, 26, 26, 0.6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(218, 165, 32, 0.3);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-title);
  font-size: 28px;
  color: var(--paper);
  cursor: pointer;
}

.nav-logo-icon {
  width: 40px;
  height: 40px;
  background: var(--vermilion);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-seal);
  font-size: 18px;
  letter-spacing: 0;
  transform: rotate(-5deg);
  box-shadow: 0 2px 8px rgba(194,58,43,0.4);
}

.nav-links {
  display: flex;
  gap: 48px;
  list-style: none;
}

.nav-links a {
  color: rgba(245, 240, 230, 0.8);
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 2px;
  position: relative;
  transition: color 0.3s;
  cursor: pointer;
}

.nav-links a:hover {
  color: var(--gold-light);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gold-light);
  transition: all 0.3s;
  transform: translateX(-50%);
}

.nav-links a:hover::after {
  width: 100%;
}

/* ===== Hero 区域（图片化升级版）===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  padding-top: 72px;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img, .hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-bg video {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(26,26,26,0.7) 0%, rgba(26,26,26,0.4) 40%, rgba(26,26,26,0.2) 70%, rgba(26,26,26,0.5) 100%);
}

.hero-character {
  position: absolute;
  right: 5%;
  bottom: 0;
  height: 88%;
  z-index: 2;
  pointer-events: none;
  /* 底部径向渐变光晕，让立绘仿佛从云雾中浮现 */
}

.hero-character img {
  height: 100%;
  width: auto;
  display: block;
  /* 三层投影：主阴影 + 金色光晕 + 外层柔光 */
  filter: 
    drop-shadow(0 25px 40px rgba(0,0,0,0.55))
    drop-shadow(0 0 50px rgba(218,165,32,0.3))
    drop-shadow(0 0 100px rgba(218,165,32,0.15));
}

/* Hero立绘底部云雾光晕 */
.hero-character::after {
  content: '';
  position: absolute;
  bottom: -2%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 30%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,248,230,0.5) 0%, rgba(218,165,32,0.15) 30%, transparent 65%);
  pointer-events: none;
  filter: blur(20px);
  z-index: -1;
}

.hero-glow {
  position: absolute;
  right: 15%;
  top: 30%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(218,165,32,0.2) 0%, transparent 60%);
  border-radius: 50%;
  z-index: 0;
  animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding: 0 80px;
}

.hero-title {
  font-family: var(--font-title);
  font-size: 110px;
  color: var(--paper);
  letter-spacing: 20px;
  margin-bottom: 24px;
  text-shadow: 
    3px 3px 0 rgba(194, 58, 43, 0.5),
    0 0 40px rgba(218, 165, 32, 0.3);
  line-height: 1.1;
}

.hero-subtitle {
  font-size: 22px;
  color: rgba(245, 240, 230, 0.8);
  letter-spacing: 12px;
  margin-bottom: 48px;
  font-weight: 400;
}

.hero-buttons {
  display: flex;
  gap: 24px;
  margin-bottom: 40px;
}

.hero-version {
  font-size: 14px;
  color: rgba(245, 240, 230, 0.6);
  letter-spacing: 2px;
}

.hero-version span {
  color: var(--gold-light);
  margin-left: 8px;
}

.hero-desc {
  font-size: 15px;
  color: rgba(245, 240, 230, 0.7);
  line-height: 2;
  letter-spacing: 1px;
  margin-bottom: 36px;
  max-width: 500px;
}

/* ===== 特性区块（图片卡片）===== */
.features {
  padding: 120px 60px;
  background: var(--paper);
  position: relative;
}

.features-bg-pattern {
  position: absolute;
  inset: 0;
  background-image: var(--img-ink-pattern);
  background-size: cover;
  background-position: center;
  opacity: 0.08;
  pointer-events: none;
}

.section-header {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
  z-index: 1;
}

.section-title {
  font-family: var(--font-title);
  font-size: 56px;
  letter-spacing: 12px;
  color: var(--ink-black);
  margin-bottom: 16px;
}

.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.section-divider-line {
  width: 60px;
  height: 1px;
  background: var(--ink-light);
}

.section-divider-dot {
  width: 8px;
  height: 8px;
  background: var(--vermilion);
  transform: rotate(45deg);
}

.section-subtitle {
  font-size: 18px;
  color: #607d8b;
  letter-spacing: 4px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.feature-card {
  background: #fff;
  border: 1px solid rgba(184,134,11,0.4);
  overflow: hidden;
  transition: all 0.4s ease;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  border-color: var(--vermilion);
}

.feature-card-img {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.feature-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.feature-card:hover .feature-card-img img {
  transform: scale(1.08);
}

.feature-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(26,26,26,0.3) 100%);
}

.feature-card-icon {
  position: absolute;
  bottom: 16px;
  left: 20px;
  font-family: var(--font-title);
  font-size: 36px;
  color: var(--paper);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  z-index: 1;
  letter-spacing: 2px;
}

.feature-card-body {
  padding: 24px 24px 28px;
}

.feature-title {
  font-family: var(--font-title);
  font-size: 24px;
  letter-spacing: 4px;
  color: var(--ink-black);
  margin-bottom: 12px;
}

.feature-desc {
  font-size: 14px;
  color: #5a4a3a;
  line-height: 1.8;
  letter-spacing: 0.5px;
}

/* ===== 门派介绍区（带立绘）===== */
.sects-section {
  padding: 120px 60px;
  background: linear-gradient(180deg, var(--paper-dark) 0%, var(--paper-aged) 100%);
  position: relative;
  overflow: hidden;
}

.sects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.sect-card-large {
  background: #fff;
  border: 1px solid rgba(139, 115, 85, 0.3);
  display: flex;
  overflow: hidden;
  transition: all 0.4s ease;
  position: relative;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.sect-card-large:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.sect-card-portrait {
  width: 160px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px 0 20px 0;
}

.sect-card-portrait img {
  width: auto;
  height: 220px;
  max-height: 240px;
  object-fit: contain;
  object-position: bottom center;
  transition: transform 0.5s;
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.35));
  display: block;
}

.sect-card-large:hover .sect-card-portrait img {
  transform: translateY(-4px) scale(1.03);
  filter: drop-shadow(0 15px 20px rgba(0,0,0,0.4)) drop-shadow(0 0 15px rgba(218,165,32,0.2));
}

/* 门派立绘底部光晕 */
.sect-card-portrait::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 30px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(4px);
  z-index: -1;
}

.sect-card-content {
  flex: 1;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}

.sect-name {
  font-family: var(--font-title);
  font-size: 32px;
  letter-spacing: 4px;
  color: var(--ink-black);
  margin-bottom: 8px;
}

.sect-motto {
  font-size: 13px;
  color: #5a4a3a;
  letter-spacing: 1px;
  margin-bottom: 16px;
  font-style: italic;
}

.sect-desc {
  font-size: 13px;
  color: #5a4a3a;
  line-height: 1.7;
  margin-bottom: 16px;
  flex: 1;
}

.sect-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sect-tag {
  font-size: 11px;
  padding: 3px 10px;
  border: 1px solid var(--ink-light);
  color: #5a4a3a;
  letter-spacing: 1px;
}

/* ===== 界面预览区 ===== */
.preview {
  padding: 120px 60px;
  background: var(--ink-black);
  position: relative;
  overflow: hidden;
}

.preview-bg {
  position: absolute;
  inset: 0;
  opacity: 0.4;
}

.preview-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,26,26,0.5) 0%, rgba(26,26,26,0.8) 50%, rgba(26,26,26,0.95) 100%);
}

.preview .section-title {
  color: var(--paper);
}

.preview .section-subtitle {
  color: var(--ink-light);
}

.preview .section-divider-line {
  background: var(--ink-gray);
}

.preview-mockup {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.mockup-frame {
  background: rgba(245, 240, 230, 0.95);
  border: 2px solid rgba(218, 165, 32, 0.3);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 60px rgba(218, 165, 32, 0.1);
  position: relative;
  overflow: hidden;
}

.mockup-header {
  height: 40px;
  background: var(--ink-deep);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  border-bottom: 2px solid var(--vermilion);
}

.mockup-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.mockup-dot.red { background: #ff5f57; }
.mockup-dot.yellow { background: #febc2e; }
.mockup-dot.green { background: #28c840; }

.mockup-body {
  display: flex;
  height: 520px;
}

.mockup-sidebar {
  width: 200px;
  background: linear-gradient(180deg, var(--paper-dark), var(--paper-aged));
  border-right: 1px solid rgba(139, 115, 85, 0.3);
  padding: 20px 16px;
}

.mockup-side-item {
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #5a4a3a;
  border-left: 2px solid transparent;
  letter-spacing: 1px;
  cursor: default;
}

.mockup-side-item.active {
  color: var(--vermilion);
  border-left-color: var(--vermilion);
  background: rgba(194, 58, 43, 0.08);
}

.mockup-chat-area {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--paper);
}

.mockup-msg {
  max-width: 70%;
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1.6;
}

.mockup-msg.system {
  align-self: center;
  background: rgba(194, 58, 43, 0.1);
  color: var(--vermilion);
  font-size: 12px;
  letter-spacing: 1px;
}

.mockup-msg.left {
  align-self: flex-start;
  background: #fff;
  border: 1px solid rgba(139, 115, 85, 0.2);
  color: var(--paper);
}

.mockup-msg.right {
  align-self: flex-end;
  background: var(--ink-deep);
  color: var(--paper);
}

.mockup-input {
  margin-top: auto;
  height: 50px;
  background: #fff;
  border: 1px solid rgba(139, 115, 85, 0.3);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
}

.mockup-input-bar {
  flex: 1;
  height: 16px;
  background: rgba(26, 26, 26, 0.08);
  border-radius: 2px;
}

.mockup-send-btn {
  width: 60px;
  height: 32px;
  background: linear-gradient(180deg, #d44535, #b83324);
  border-radius: 2px;
}

/* ===== 公告栏 ===== */
.announcements {
  padding: 100px 60px;
  background: var(--paper);
  position: relative;
}

.announce-container {
  max-width: 800px;
  margin: 0 auto;
}

.announce-list {
  border: 1px solid rgba(139, 115, 85, 0.3);
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.announce-item {
  padding: 24px 32px;
  border-bottom: 1px solid rgba(139, 115, 85, 0.15);
  display: flex;
  gap: 24px;
  cursor: pointer;
  transition: all 0.3s;
}

.announce-item:last-child {
  border-bottom: none;
}

.announce-item:hover {
  background: rgba(194, 58, 43, 0.03);
  padding-left: 40px;
}

.announce-tag {
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: 12px;
  letter-spacing: 1px;
  height: fit-content;
}

.announce-tag.update {
  background: rgba(194, 58, 43, 0.1);
  color: var(--vermilion);
  border: 1px solid var(--vermilion);
}

.announce-tag.event {
  background: rgba(74, 124, 89, 0.1);
  color: var(--jade);
  border: 1px solid var(--jade);
}

.announce-tag.notice {
  background: rgba(61, 90, 128, 0.1);
  color: var(--sword-blue);
  border: 1px solid var(--sword-blue);
}

.announce-content {
  flex: 1;
}

.announce-title {
  font-size: 17px;
  color: var(--ink-black);
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.announce-desc {
  font-size: 14px;
  color: #5a4a3a;
  line-height: 1.6;
}

.announce-date {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--ink-light);
  font-family: var(--font-seal);
  letter-spacing: 1px;
}

/* ===== 页脚 ===== */
.footer {
  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
  color: var(--ink-light);
  padding: 60px 60px 30px;
  border-top: 2px solid rgba(218, 165, 32, 0.2);
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 40px;
}

.footer-brand h3 {
  font-family: var(--font-title);
  font-size: 32px;
  color: var(--paper);
  letter-spacing: 6px;
  margin-bottom: 16px;
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 1px;
}

.footer-col h4 {
  font-size: 16px;
  color: var(--gold-light);
  margin-bottom: 20px;
  letter-spacing: 2px;
  font-weight: 600;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 12px;
}

.footer-col a {
  color: var(--ink-light);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
  cursor: pointer;
}

.footer-col a:hover {
  color: var(--paper);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 1px;
}

/* ===== 登录页（图片化升级版）===== */
.login-page {
  min-height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.login-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.login-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(26,26,26,0.8) 0%, rgba(26,26,26,0.5) 50%, rgba(26,26,26,0.3) 100%);
}

.login-left {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px;
  color: var(--paper);
}

.login-logo {
  font-family: var(--font-title);
  font-size: 72px;
  letter-spacing: 16px;
  margin-bottom: 20px;
  text-shadow: 0 0 30px rgba(218,165,32,0.3);
}

.login-slogan {
  font-size: 20px;
  letter-spacing: 6px;
  color: rgba(245, 240, 230, 0.7);
  margin-bottom: 60px;
}

.login-poem {
  font-size: 16px;
  line-height: 2.2;
  letter-spacing: 2px;
  color: rgba(245, 240, 230, 0.5);
  font-style: italic;
}

.login-right {
  position: relative;
  z-index: 1;
  width: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.login-card {
  width: 100%;
  background: linear-gradient(180deg, rgba(245,240,230,0.97) 0%, rgba(232,223,207,0.97) 100%);
  border: 2px solid rgba(139, 115, 85, 0.4);
  padding: 48px 40px;
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(139,115,85,0.1);
  position: relative;
}

.login-card::before,
.login-card::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid var(--vermilion);
}

.login-card::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}

.login-card::after {
  bottom: -1px;
  right: -1px;
  border-left: none;
  border-top: none;
}

.login-card-title {
  font-family: var(--font-title);
  font-size: 36px;
  letter-spacing: 8px;
  color: var(--ink-black);
  text-align: center;
  margin-bottom: 8px;
}

.login-card-subtitle {
  text-align: center;
  color: #5a4a3a;
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 36px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 14px;
  color: #5a4a3a;
  margin-bottom: 8px;
  letter-spacing: 2px;
}

.form-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(184,134,11,0.4);
  background: rgba(255,255,255,0.8);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-black);
  transition: all 0.3s;
  letter-spacing: 1px;
}

.form-input:focus {
  outline: none;
  border-color: var(--vermilion);
  box-shadow: 0 0 0 3px rgba(194, 58, 43, 0.1);
  background: #fff;
}

.form-error {
  color: var(--vermilion);
  font-size: 13px;
  margin-top: 6px;
  letter-spacing: 1px;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #5a4a3a;
  cursor: pointer;
  letter-spacing: 1px;
}

.form-checkbox input {
  cursor: pointer;
}

.form-link {
  font-size: 14px;
  color: var(--vermilion);
  text-decoration: none;
  letter-spacing: 1px;
  cursor: pointer;
}

.form-link:hover {
  text-decoration: underline;
}

.btn-block {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  letter-spacing: 4px;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
}

.login-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(139, 115, 85, 0.3);
}

.login-divider-text {
  font-size: 13px;
  color: var(--ink-light);
  letter-spacing: 2px;
}

.guest-btn {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--ink-gray);
  color: #5a4a3a;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s;
}

.guest-btn:hover {
  border-color: var(--ink-black);
  color: var(--ink-black);
  background: rgba(26,26,26,0.05);
}

.login-footer-text {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: #5a4a3a;
  letter-spacing: 1px;
}

/* ===== 角色创建（图片化升级版）===== */
.char-create-page {
  min-height: 100vh;
  background: var(--img-ink-pattern) center/cover, linear-gradient(135deg, var(--paper) 0%, var(--paper-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative;
  overflow: hidden;
}

.char-create-container {
  width: 100%;
  max-width: 750px;
  background: 
    linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(245,240,230,0.95) 100%);
  border: 2px solid rgba(139, 115, 85, 0.4);
  box-shadow: 0 30px 80px rgba(26, 26, 26, 0.2), inset 0 0 40px rgba(139,115,85,0.05);
  padding: 48px;
  position: relative;
  z-index: 1;
}

.char-steps {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
}

.char-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink-light);
  font-size: 13px;
  letter-spacing: 2px;
}

.char-step.active {
  color: var(--vermilion);
}

.char-step-num {
  width: 36px;
  height: 36px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-seal);
  font-size: 16px;
}

.char-step.active .char-step-num {
  background: var(--vermilion);
  color: #fff;
  border-color: var(--vermilion);
}

.char-form-title {
  font-family: var(--font-title);
  font-size: 32px;
  letter-spacing: 6px;
  text-align: center;
  margin-bottom: 32px;
  color: var(--ink-black);
}

/* 头像选择（用图集） */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
  padding: 0 20px;
}

.avatar-item {
  aspect-ratio: 1;
  border: 3px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  background: var(--paper-dark);
  border-radius: 4px;
}

.avatar-item:hover {
  border-color: var(--gold-light);
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(218, 165, 32, 0.3);
}

.avatar-item.selected {
  border-color: var(--vermilion);
  box-shadow: 0 0 20px rgba(194, 58, 43, 0.3);
}

.avatar-item.selected::after {
  content: '选';
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: var(--vermilion);
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  font-family: var(--font-seal);
  z-index: 2;
}

.avatar-sprite-img {
  width: 100%;
  height: 100%;
  background-image: var(--img-avatars);
  background-size: 400% 400%;
  background-repeat: no-repeat;
}

/* 门派选择 */
.sect-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.sect-card {
  border: 1px solid rgba(139, 115, 85, 0.3);
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  background: linear-gradient(90deg, rgba(184,134,11,0.1) 0%, rgba(45,36,24,0.8) 100%);
  position: relative;
  overflow: hidden;
}

.sect-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.sect-card.selected {
  border-color: var(--vermilion);
  background: linear-gradient(180deg, #fff, rgba(194, 58, 43, 0.05));
  box-shadow: 0 0 20px rgba(194, 58, 43, 0.15);
}

.sect-card-name {
  font-family: var(--font-title);
  font-size: 28px;
  letter-spacing: 4px;
  color: var(--ink-black);
  margin-bottom: 8px;
}

.sect-card-motto {
  font-size: 13px;
  color: #5a4a3a;
  letter-spacing: 1px;
  margin-bottom: 12px;
  font-style: italic;
}

.sect-card-tags {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.sect-card-tag {
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid var(--ink-light);
  color: #5a4a3a;
  letter-spacing: 1px;
}

/* 起名输入 */
.name-input-group {
  margin-bottom: 32px;
}

.name-input-wrapper {
  display: flex;
  gap: 12px;
}

.random-btn {
  padding: 14px 20px;
  background: var(--paper-dark);
  border: 1px solid rgba(139, 115, 85, 0.3);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  color: #5a4a3a;
  letter-spacing: 1px;
  transition: all 0.3s;
  white-space: nowrap;
}

.random-btn:hover {
  background: var(--paper-aged);
  color: var(--ink-black);
}

.char-actions {
  display: flex;
  gap: 16px;
}

.char-actions .btn {
  flex: 1;
}

/* ===== 游戏主界面（图片化升级版）===== */
.game-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex !important;
  flex-direction: column !important;
  background: var(--paper);
  overflow: hidden;
  overflow: hidden;
  z-index: 100;
}

.game-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.game-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.35) saturate(0.8);
}

.game-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,26,26,0.3) 0%, rgba(26,26,26,0.1) 50%, rgba(26,26,26,0.5) 100%);
}

/* 顶栏 */
.game-topbar {
  min-height: 56px;
  background: linear-gradient(180deg, rgba(26,26,26,0.95) 0%, rgba(44,44,44,0.9) 100%);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 24px;
  border-bottom: 2px solid var(--vermilion);
  flex-shrink: 0;
  position: relative;
  z-index: 5;
  box-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

.game-avatar {
  width: 44px;
  height: 44px;
  background: var(--paper);
  border: 2px solid var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(218,165,32,0.3);
}

.game-avatar-img {
  width: 100%;
  height: 100%;
  background-image: var(--img-avatars);
  background-size: 400% 400%;
  background-repeat: no-repeat;
}

.game-player-info {
  flex: 1;
  min-width: 0;
}

.game-player-name {
  font-family: var(--font-title);
  font-size: 20px;
  color: var(--paper);
  letter-spacing: 2px;
  margin-bottom: 2px;
}

.game-player-detail {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: rgba(245, 240, 230, 0.7);
  letter-spacing: 1px;
  flex-wrap: wrap;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.detail-label {
  color: rgba(245, 240, 230, 0.5);
}

.detail-value {
  color: var(--gold-light);
}

.exp-bar {
  width: 120px;
  height: 6px;
  background: rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
  border-radius: 3px;
}

.exp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transition: width 0.5s;
  box-shadow: 0 0 6px rgba(218, 165, 32, 0.5);
}

.game-top-actions {
  display: flex;
  gap: 12px;
}

.top-btn {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--paper);
  cursor: pointer;
  font-size: 16px;
  font-family: var(--font-title);
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.top-btn:hover {
  background: rgba(255,255,255,0.2);
  border-color: var(--gold-light);
}

/* 主体 */
.game-main {
  flex: 1 1 auto !important;
  min-height: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  position: relative;
  z-index: 5;
}

/* 左侧边栏 */
.game-sidebar-left {
  width: 260px;
  height: 100%;
  background: linear-gradient(180deg, rgba(245,240,230,0.92) 0%, rgba(232,223,207,0.95) 100%);
  border-right: 2px solid rgba(139, 115, 85, 0.4);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 2px 0 20px rgba(0,0,0,0.2);
}

/* 顶部功能导航（人物/背包/任务/天下地图）—— 左侧横排竖长按钮 */
.sidebar-tabs {
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 6px 6px 8px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(139, 115, 85, 0.1), rgba(139, 115, 85, 0.04));
  border-bottom: 1px solid rgba(139, 115, 85, 0.3);
}

.sidebar-tabs-divider {
  height: 1px;
  margin: 3px 6px;
  background: rgba(139, 115, 85, 0.32);
  flex-shrink: 0;
}

.sidebar-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 74px;
  padding: 8px 2px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(139, 115, 85, 0.22);
  font-family: var(--font-body);
  font-size: 11px;
  color: #5a4a3a;
  cursor: pointer;
  letter-spacing: 1px;
  white-space: nowrap;
  transition: all 0.22s;
}

.sidebar-tab svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-tab:hover {
  background: rgba(255, 255, 255, 0.85);
  color: #8a5a1e;
  border-color: rgba(184, 134, 11, 0.55);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.sidebar-tab.active {
  color: #fff;
  background: linear-gradient(180deg, #c69c3a, #9a7b2f);
  border-color: #9a7b2f;
  box-shadow: inset 0 1px 0 rgba(255, 235, 180, 0.35), 0 1px 4px rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.sidebar-tab-feature {
  color: #7a5a20;
  background: rgba(255, 248, 220, 0.55);
}

.sidebar-tab-feature:hover {
  background: rgba(255, 225, 150, 0.65);
  color: #9a6b15;
}

.sidebar-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}

/* 人物面板（带立绘） */
.char-portrait-section {
  text-align: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(139, 115, 85, 0.2);
}

.char-portrait-img {
  width: 140px;
  height: 180px;
  margin: 0 auto 12px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.char-portrait-img img {
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  filter: 
    drop-shadow(0 8px 12px rgba(0,0,0,0.35))
    drop-shadow(0 0 8px rgba(218,165,32,0.15));
}

/* 人物面板立绘底部光晕 */
.char-portrait-img::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 20px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(3px);
  z-index: -1;
}

.char-portrait-name {
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--ink-black);
  letter-spacing: 3px;
  margin-bottom: 4px;
}

.char-portrait-title {
  font-size: 12px;
  color: var(--vermilion);
  letter-spacing: 2px;
}

.panel-section {
  margin-bottom: 20px;
}

.panel-section-title {
  font-family: var(--font-title);
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--ink-black);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(139, 115, 85, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-section-title::before {
  content: '';
  width: 4px;
  height: 16px;
  background: var(--vermilion);
}

.attr-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px dashed rgba(139, 115, 85, 0.15);
}

.attr-name {
  color: #607d8b;
  letter-spacing: 1px;
}

.attr-value {
  color: var(--ink-black);
  font-weight: 600;
  font-family: var(--font-seal);
}

/* 装备栏 */
.equip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.equip-slot {
  aspect-ratio: 1;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(139, 115, 85, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 3px;
  overflow: hidden;
}

.equip-slot:hover {
  border-color: var(--vermilion);
  box-shadow: 0 0 8px rgba(194, 58, 43, 0.2);
}

.equip-icon {
  width: 100%;
  height: 100%;
  background-image: var(--img-equipment);
  background-size: 300% 300%;
  background-repeat: no-repeat;
}

.equip-empty {
  width: 60%;
  height: 60%;
  border: 1px dashed rgba(139, 115, 85, 0.3);
  border-radius: 3px;
}

.equip-slot-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 10px;
  color: #fff;
  background: rgba(0,0,0,0.6);
  text-align: center;
  padding: 1px 0;
  letter-spacing: 1px;
}

/* 背包（物品图集中） */
.bag-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.bag-slot {
  aspect-ratio: 1;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(139, 115, 85, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 3px;
  overflow: hidden;
}

.bag-slot:hover {
  border-color: var(--vermilion);
  transform: scale(1.08);
  box-shadow: 0 2px 10px rgba(194, 58, 43, 0.2);
  z-index: 10;
}

.bag-item-icon {
  width: 100%;
  height: 100%;
  background-image: var(--img-items);
  background-size: 300% 300%;
  background-repeat: no-repeat;
}

.bag-item-count {
  position: absolute;
  bottom: 1px;
  right: 3px;
  font-size: 11px;
  color: #fff;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  font-family: var(--font-seal);
}

.bag-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26,26,26,0.95);
  color: var(--paper);
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  display: none;
  border: 1px solid var(--gold);
}

.bag-slot:hover .bag-tooltip {
  display: block;
}

/* 任务 */
.quest-item {
  padding: 12px;
  background: linear-gradient(135deg, rgba(44,44,44,0.9) 0%, rgba(26,26,26,0.95) 100%);
  border: 1px solid rgba(184,134,11,0.3);
  border-left: 3px solid var(--gold);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 4px;
}

.quest-item:hover {
  border-color: var(--gold-light);
  background: linear-gradient(135deg, rgba(60,50,30,0.95) 0%, rgba(40,35,25,0.98) 100%);
  box-shadow: 0 0 15px rgba(184,134,11,0.2);
}

.quest-item.completed {
  border-left-color: var(--jade);
}

.quest-item.inProgress {
  border-left-color: var(--gold);
}

.quest-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 6px;
  letter-spacing: 1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quest-progress {
  font-size: 11px;
  color: #5a4a3a;
  margin-bottom: 6px;
}

.quest-reward {
  font-size: 11px;
  color: #ffd54f;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

/* 地图 */
.map-area {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(139, 115, 85, 0.2);
  padding: 12px;
  border-radius: 3px;
}

.map-location {
  padding: 8px 12px;
  margin-bottom: 4px;
  font-size: 13px;
  color: #5a4a3a;
  cursor: pointer;
  border-left: 2px solid transparent;
  letter-spacing: 1px;
  transition: all 0.2s;
  border-radius: 0 3px 3px 0;
}

.map-location:hover {
  background: rgba(139, 115, 85, 0.1);
  color: var(--ink-black);
}

.map-location.current {
  color: var(--vermilion);
  border-left-color: var(--vermilion);
  background: rgba(194, 58, 43, 0.08);
}

/* 聊天主区 */
.chat-container {
  flex: 1;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(245, 240, 230, 0.88);
  backdrop-filter: blur(4px);
}

.chat-channels {
  display: flex;
  background: linear-gradient(180deg, rgba(139,115,85,0.15), rgba(139,115,85,0.08));
  border-bottom: 1px solid rgba(139, 115, 85, 0.3);
  flex-shrink: 0;
}

.chat-channel {
  padding: 14px 20px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: #5a4a3a;
  cursor: pointer;
  letter-spacing: 2px;
  position: relative;
  transition: all 0.3s;
}

.chat-channel.active {
  color: var(--ink-black);
  background: rgba(255,255,255,0.5);
}

.chat-channel.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--vermilion);
}

.chat-channel-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  background: var(--vermilion);
  color: #fff;
  font-size: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  background-image: 
    radial-gradient(ellipse at 20% 30%, rgba(139, 115, 85, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(139, 115, 85, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(200, 55, 45, 0.02) 0%, transparent 60%);
  position: relative;
}

.chat-messages::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%238b7355' fill-opacity='0.02'%3E%3Cpath d='M20 20c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm-10 0c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm20 0c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.6;
}

.chat-msg {
  display: flex;
  gap: 12px;
  max-width: 85%;
  opacity: 1;
}

@keyframes msgIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-msg.self {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-msg-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 2px solid var(--gold);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.chat-msg-avatar-img {
  width: 100%;
  height: 100%;
  background-image: var(--img-avatars);
  background-size: 400% 400%;
  background-repeat: no-repeat;
}

.chat-msg-body {
  flex: 1;
  min-width: 0;
}

.chat-msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.chat-msg.self .chat-msg-meta {
  justify-content: flex-end;
}

.chat-msg-sender {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-black);
  letter-spacing: 1px;
}

.chat-msg-time {
  font-size: 11px;
  color: var(--ink-light);
}

.chat-msg-level {
  font-size: 11px;
  padding: 1px 5px;
  background: rgba(184, 134, 11, 0.15);
  color: var(--gold);
  letter-spacing: 1px;
  border-radius: 2px;
}

.chat-msg-bubble {
  padding: 10px 14px;
  background: #fff;
  border: 1px solid rgba(139, 115, 85, 0.2);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-deep);
  letter-spacing: 0.5px;
  display: inline-block;
  word-break: break-word;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.chat-msg.self .chat-msg-bubble {
  background: linear-gradient(180deg, #c23a2b, #9e2d20);
  color: var(--paper);
  border-color: var(--vermilion-deep);
  box-shadow: 0 2px 10px rgba(194, 58, 43, 0.2);
}

/* 系统消息 */
.chat-msg.system {
  align-self: center;
  max-width: 90%;
  text-align: center;
}

.chat-msg.system .chat-msg-bubble {
  background: rgba(194, 58, 43, 0.08);
  border: 1px solid rgba(194, 58, 43, 0.2);
  color: var(--vermilion-deep);
  font-size: 13px;
  box-shadow: none;
}

/* 事件消息 */
.chat-msg.event .chat-msg-bubble {
  background: linear-gradient(135deg, rgba(184, 134, 11, 0.08), rgba(184, 134, 11, 0.04));
  border: 1px solid rgba(184, 134, 11, 0.3);
  color: var(--ink-deep);
}

.event-title {
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--gold);
  margin-bottom: 6px;
  letter-spacing: 3px;
}

.event-choices {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.event-choice-btn {
  padding: 6px 14px;
  background: var(--paper);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.3s;
  border-radius: 3px;
}

.event-choice-btn:hover {
  background: var(--gold);
  color: #fff;
}

/* 战斗飘字 */
.battle-text {
  font-family: var(--font-title);
  font-size: 28px;
  color: var(--vermilion);
  letter-spacing: 4px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5), 0 0 20px rgba(194,58,43,0.5);
  animation: battleFloat 1.5s ease-out forwards;
  position: fixed;
  z-index: 200;
  pointer-events: none;
}

@keyframes battleFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  30% {
    opacity: 1;
    transform: translateY(-30px) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) scale(1);
  }
}

/* 打字机光标 */
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: currentColor;
  margin-left: 2px;
  animation: blink 0.8s infinite;
  vertical-align: middle;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* 输入区 */
.chat-input-area {
  border-top: 1px solid rgba(139, 115, 85, 0.3);
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.8));
  padding: 12px 16px 12px;
  margin: 0;
  flex-shrink: 0;
}

.quick-cmds {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.quick-cmd {
  padding: 4px 12px;
  background: rgba(139, 115, 85, 0.1);
  border: 1px solid rgba(139, 115, 85, 0.25);
  color: #5a4a3a;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 1px;
  font-family: var(--font-body);
  transition: all 0.3s;
  border-radius: 3px;
}

.quick-cmd:hover {
  background: var(--vermilion);
  color: #fff;
  border-color: var(--vermilion);
}

.chat-input-wrapper {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.chat-input {
  flex: 1;
  min-height: 48px;
  max-height: 120px;
  padding: 12px 14px;
  border: 1px solid rgba(139, 115, 85, 0.3);
  font-family: var(--font-body);
  font-size: 14px;
  resize: none;
  line-height: 1.6;
  color: var(--ink-black);
  transition: all 0.3s;
  letter-spacing: 0.5px;
  background: rgba(255,255,255,0.9);
  border-radius: 4px;
}

.chat-input:focus {
  outline: none;
  border-color: var(--vermilion);
  box-shadow: 0 0 0 3px rgba(194, 58, 43, 0.08);
  background: #fff;
}

.chat-send-btn {
  padding: 0 24px;
  height: 48px;
  background: linear-gradient(180deg, #d44535, #b83324);
  color: #fff;
  border: 1px solid var(--vermilion-deep);
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 4px;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(194,58,43,0.3);
}

.chat-send-btn:hover {
  background: linear-gradient(180deg, #e05040, #c23a2b);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(194,58,43,0.4);
}

/* 右侧在线列表 */
.game-sidebar-right {
  width: 200px;
  height: 100%;
  background: linear-gradient(180deg, rgba(245,240,230,0.92) 0%, rgba(232,223,207,0.95) 100%);
  border-left: 2px solid rgba(139, 115, 85, 0.4);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: -2px 0 20px rgba(0,0,0,0.2);
}

.online-header {
  padding: 14px 16px;
  font-size: 13px;
  color: #5a4a3a;
  letter-spacing: 2px;
  border-bottom: 1px solid rgba(139, 115, 85, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(139, 115, 85, 0.1);
}

.online-count {
  color: var(--jade);
  font-weight: 600;
}

.online-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}

.online-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 3px;
}

.online-player:hover {
  background: rgba(139, 115, 85, 0.1);
}

.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jade);
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(74, 124, 89, 0.5);
}

.online-name {
  flex: 1;
  font-size: 13px;
  color: var(--ink-deep);
  letter-spacing: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-level {
  font-size: 11px;
  color: var(--gold);
  font-family: var(--font-seal);
}

/* ===== 事件弹窗 ===== */
.event-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.event-modal {
  width: 500px;
  max-width: 90vw;
  background: linear-gradient(180deg, #2d2418 0%, #1f1a12 50%, #15110a 100%);
  border: 2px solid var(--gold);
  box-shadow: 0 0 60px rgba(184,134,11,0.3), 0 30px 80px rgba(0,0,0,0.6);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: relative;
  animation: modalIn 0.4s ease;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.event-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-light), var(--vermilion), var(--gold-light), transparent);
}

.event-modal-img {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.event-modal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-modal-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(45,36,24,0.95) 100%);
}

.event-modal-title {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-title);
  font-size: 32px;
  color: var(--paper);
  letter-spacing: 8px;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
  z-index: 2;
}

.event-modal-body {
  padding: 24px 28px;
}

.event-modal-content {
  font-size: 15px;
  line-height: 2;
  color: #e0d5c1;
  margin-bottom: 24px;
  letter-spacing: 0.5px;
}

.event-modal-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.event-modal-choice {
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(184,134,11,0.12), rgba(194,58,43,0.08));
  border: 1px solid rgba(184,134,11,0.3);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  letter-spacing: 2px;
  transition: all 0.3s;
  text-align: left;
  border-radius: 4px;
}

.event-modal-choice:hover {
  background: linear-gradient(180deg, var(--vermilion), var(--vermilion-deep));
  color: #fff;
  border-color: var(--vermilion-deep);
  transform: translateX(4px);
}

/* 战斗弹窗 */
.battle-modal {
  width: 600px;
}

.battle-combatants {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 30px 40px;
  background: linear-gradient(180deg, rgba(26,26,26,0.8), rgba(44,44,44,0.9));
  position: relative;
  min-height: 240px;
}

.battle-combatant {
  text-align: center;
}

.battle-combatant-img {
  width: 100px;
  height: 140px;
  margin: 0 auto 8px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.battle-combatant-img img {
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  filter: 
    drop-shadow(0 8px 15px rgba(0,0,0,0.5))
    drop-shadow(0 0 10px rgba(218,165,32,0.2));
}

/* 战斗立绘底部投影 */
.battle-combatant-img::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 16px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(3px);
  z-index: -1;
}

.battle-combatant-name {
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--paper);
  letter-spacing: 2px;
}

.battle-combatant-hp {
  font-size: 12px;
  color: var(--gold-light);
  margin-top: 4px;
}

.battle-vs {
  font-family: var(--font-title);
  font-size: 48px;
  color: var(--vermilion);
  text-shadow: 0 0 20px rgba(194,58,43,0.5);
  letter-spacing: 4px;
}

/* ===== 加载状态 ===== */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.loading-content {
  text-align: center;
  color: var(--paper);
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(245, 240, 230, 0.15);
  border-top-color: var(--vermilion);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: spin 1s linear infinite;
  box-shadow: 0 0 20px rgba(194,58,43,0.3);
}

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

.loading-text {
  font-size: 15px;
  letter-spacing: 4px;
  font-family: var(--font-title);
}

/* ===== 响应式 ===== */
@media (max-width: 1200px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .sects-grid {
    grid-template-columns: 1fr;
  }
  
  .game-sidebar-left {
    width: 220px;
  }
  
  .game-sidebar-right {
    width: 180px;
  }
  
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .game-sidebar-left {
    width: 200px;
  }
  
  .game-sidebar-right {
    display: none;
  }
  
  .hero-character {
    display: none;
  }
  
  .hero-content {
    max-width: 100%;
  }
}

@media (max-width: 700px) {
  .game-sidebar-left {
    display: none;
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 20px;
    height: 60px;
  }
  
  .nav-links {
    display: none;
  }
  
  .hero {
    min-height: 100vh;
  }
  
  .hero-content {
    padding: 0 30px;
  }
  
  .hero-title {
    font-size: 64px;
    letter-spacing: 10px;
  }
  
  .hero-subtitle {
    font-size: 16px;
    letter-spacing: 4px;
  }
  
  .hero-buttons {
    flex-direction: column;
  }
  
  .features, .preview, .announcements, .sects-section {
    padding: 60px 20px;
  }
  
  .section-title {
    font-size: 36px;
    letter-spacing: 6px;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .feature-card-img {
    height: 160px;
  }
  
  .mockup-body {
    height: 300px;
  }
  
  .mockup-sidebar {
    display: none;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .footer {
    padding: 40px 20px 20px;
  }
  
  .login-page {
    flex-direction: column;
  }
  
  .login-left {
    padding: 40px 30px 20px;
    flex: none;
  }
  
  .login-logo {
    font-size: 48px;
    letter-spacing: 8px;
  }
  
  .login-poem {
    display: none;
  }
  
  .login-right {
    width: 100%;
    padding: 20px;
  }
  
  .login-card {
    padding: 32px 24px;
  }
  
  .char-create-container {
    padding: 24px;
  }
  
  .avatar-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .sect-grid {
    grid-template-columns: 1fr;
  }
  
  .sect-card-large {
    flex-direction: column;
  }
  
  .sect-card-portrait {
    width: 100%;
    height: 200px;
  }
}

/* ===== 聊天区横向快捷栏 ===== */
.chat-quick-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.25);
  border-top: 1px solid rgba(139,115,85,0.2);
  border-bottom: 1px solid rgba(139,115,85,0.2);
}

.chat-quick-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-quick-label {
  font-family: 'Ma Shan Zheng', 'ZCOOL XiaoWei', serif;
  font-size: 12px;
  color: #daa520;
  letter-spacing: 2px;
  min-width: 32px;
}

.chat-quick-slots {
  display: flex;
  gap: 5px;
}

.chat-quick-slot {
  width: 38px;
  height: 38px;
  border: 2px solid;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  background: linear-gradient(135deg, rgba(139,115,85,0.2), rgba(0,0,0,0.3));
}

.chat-quick-slot.empty::after {
  content: '空';
  font-size: 11px;
  color: rgba(139, 115, 85, 0.6);
  position: absolute;
}

.chat-quick-slot:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 3px 12px rgba(212, 168, 83, 0.5), 0 0 8px rgba(255, 215, 0, 0.2);
  border-color: #bf360c !important;
}

.chat-quick-skill {
  border-color: #daa520;
}

.chat-quick-skill:hover {
  border-color: #bf360c;
  box-shadow: 0 3px 10px rgba(218,165,32,0.4);
}

.chat-quick-potion {
  border-color: #4a7c59;
}

.chat-quick-potion:hover {
  border-color: #6a9c79;
  box-shadow: 0 3px 10px rgba(74,124,89,0.4);
}

.chat-quick-name {
  font-size: 10px;
  color: #f5f0e6;
  font-family: 'Ma Shan Zheng', 'ZCOOL XiaoWei', serif;
  letter-spacing: 1px;
  line-height: 1.1;
}

.chat-quick-lv {
  font-size: 8px;
  color: #daa520;
  position: absolute;
  bottom: 1px;
  right: 2px;
  font-weight: 600;
}

.chat-quick-count {
  font-size: 8px;
  color: #e05040;
  position: absolute;
  bottom: 1px;
  right: 2px;
  font-weight: 600;
}

.chat-quick-empty {
  font-size: 10px;
  color: rgba(139,115,85,0.5);
}

.chat-quick-divider {
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, transparent, rgba(139,115,85,0.5), transparent);
}

/* ===== 物品详情弹窗 ===== */
.item-modal-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;
}

.item-modal {
  width: 320px;
  background: linear-gradient(180deg, #2a2520 0%, #1a1815 100%);
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 0 30px rgba(218,165,32,0.3);
}

.item-modal-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(218,165,32,0.3);
}

.item-modal-icon {
  width: 60px;
  height: 60px;
  background-size: 300% 300%;
  background-repeat: no-repeat;
  border: 1px solid var(--gold);
  border-radius: 4px;
  flex-shrink: 0;
}

.item-modal-info {
  flex: 1;
}

.item-modal-name {
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.item-modal-type {
  font-size: 12px;
  color: #607d8b;
  letter-spacing: 1px;
}

.item-modal-desc {
  font-size: 13px;
  color: var(--paper);
  line-height: 1.6;
  margin-bottom: 15px;
  padding: 10px;
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
}

.item-modal-attrs {
  margin-bottom: 15px;
}

.item-modal-attr {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
  color: var(--paper);
}

.item-modal-attr .attr-val {
  color: #4ade80;
  font-weight: 600;
}

.item-modal-actions {
  display: flex;
  gap: 8px;
}

.item-modal-btn {
  flex: 1;
  padding: 8px 0;
  border: 1px solid var(--gold);
  background: rgba(218,165,32,0.1);
  color: var(--gold);
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
  letter-spacing: 1px;
  font-family: var(--font-seal);
}

.item-modal-btn:hover {
  background: var(--gold);
  color: #1a1815;
}

.item-modal-btn.danger {
  border-color: var(--vermilion);
  background: rgba(194,58,43,0.1);
  color: var(--vermilion);
}

.item-modal-btn.danger:hover {
  background: var(--vermilion);
  color: #fff;
}

.item-modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #607d8b;
  cursor: pointer;
  font-size: 18px;
  background: none;
  border: none;
}

.item-modal-close:hover {
  color: var(--vermilion);
}

/* 装备栏一行4个布局 */
.equip-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px;
}


/* ===== 商店系统 ===== */
.topbar-currencies {
  display: flex;
  gap: 12px;
  margin-right: 16px;
  align-items: center;
}
.top-currency {
  font-size: 13px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
}
.top-currency.gold { color: #fbbf24; }
.top-currency.ingot { color: #d1d5db; }
.top-currency.spiritStone { color: #4ade80; }


/* 商店弹窗 */






/* ===== 战斗系统 ===== */
.explore-btn {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #dc2626, #991b1b);
  border: 1px solid #fbbf24;
  border-radius: 6px;
  color: #fbbf24;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 2px;
  transition: all 0.2s;
}
.explore-btn:hover {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220,38,38,0.4);
}

.battle-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  backdrop-filter: blur(6px);
}
.battle-modal {
  width: 680px;
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
  border: 2px solid #dc2626;
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(220,38,38,0.4), inset 0 0 80px rgba(0,0,0,0.6);
  padding: 20px;
}
.battle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(220,38,38,0.3);
}
.battle-title {
  font-size: 20px;
  font-weight: bold;
  color: #fbbf24;
  letter-spacing: 4px;
}
.battle-turn {
  font-size: 14px;
  color: #c8b898;
}

.battle-arena {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 20px;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
}
.battle-side {
  flex: 1;
  text-align: center;
}
.battle-portrait {
  margin-bottom: 12px;
}
.battle-avatar, .battle-monster-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 8px;
  background-image: url('/assets/img/avatars.png');
  background-size: 256px 128px;
  border: 2px solid #fbbf24;
  border-radius: 8px;
}
.battle-monster-icon {
  background-image: url('/assets/img/monsters.png'), url('/assets/img/items.png');
  background-size: 144px 144px;
  border-color: #dc2626;
}
.battle-name {
  font-size: 16px;
  font-weight: bold;
  color: #60a5fa;
}
.monster-name {
  color: #f87171;
}
.battle-stats {
  text-align: left;
}
.battle-hp-bar, .battle-mp-bar {
  position: relative;
  height: 18px;
  background: rgba(0,0,0,0.5);
  border-radius: 9px;
  margin-bottom: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}
.battle-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  transition: width 0.3s;
}
.battle-hp-fill.monster {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}
.battle-mp-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  transition: width 0.3s;
}
.battle-hp-text, .battle-mp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.battle-attrs {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #aaa;
  margin-top: 8px;
  justify-content: center;
}
.battle-monster-desc {
  font-size: 11px;
  color: #666;
  margin-top: 8px;
  text-align: center;
}
.battle-vs {
  font-size: 28px;
  font-weight: bold;
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251,191,36,0.5);
  padding: 0 20px;
}

.battle-log {
  height: 120px;
  overflow-y: auto;
  background: rgba(0,0,0,0.4);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,0.08);
}
.battle-log::-webkit-scrollbar { width: 6px; }
.battle-log::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
.battle-log-item {
  font-size: 13px;
  padding: 3px 0;
  line-height: 1.5;
}
.battle-log-item.player { color: #60a5fa; }
.battle-log-item.monster { color: #f87171; }
.battle-log-item.system { color: #fbbf24; }

.battle-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.battle-btn {
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}
.battle-btn.attack {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  color: #fff;
}
.battle-btn.skill {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: #fff;
}
.battle-btn.potion {
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff;
}
.battle-btn.flee {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: #fff;
}
.battle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.battle-btn.confirm {
  background: linear-gradient(135deg, var(--gold), #b8860b);
  color: #1a1a2e;
  padding: 12px 40px;
  margin-top: 16px;
}

.battle-result {
  text-align: center;
  padding: 20px;
}
.battle-result-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
}
.battle-result.victory .battle-result-title {
  color: #fbbf24;
  text-shadow: 0 0 20px rgba(251,191,36,0.5);
}
.battle-result.defeat .battle-result-title {
  color: #ef4444;
}
.battle-rewards {
  display: flex;
  justify-content: center;
  gap: 24px;
  font-size: 15px;
  color: #ddd;
  margin-bottom: 16px;
}

/* ===== NPC系统 ===== */
.map-npc-section {
  margin: 12px 0;
  padding: 10px;
  background: linear-gradient(135deg, rgba(44,44,44,0.8) 0%, rgba(26,26,26,0.9) 100%);
  border-radius: 6px;
  border: 1px solid rgba(184,134,11,0.3);
}
.map-npc-title {
  font-size: 13px;
  color: var(--gold);
  margin-bottom: 8px;
  font-weight: bold;
}
.npc-avatar-img {
  width: 36px; height: 36px; border-radius: 8px; object-fit: cover;
  border: 1px solid rgba(255, 215, 130, 0.5); background: #fff; flex: none;
}
.monster-avatar-img {
  width: 32px; height: 32px; border-radius: 6px; object-fit: cover;
  border: 1px solid rgba(160, 200, 255, 0.4); background: #fff; flex: none;
}
.npc-dialog-portrait-img {
  width: 76px; height: 76px; border-radius: 12px; object-fit: cover;
  border: 2px solid rgba(255, 215, 130, 0.6); background: #fff;
}
.map-npc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.map-npc-item:hover {
  background: rgba(184,134,11,0.15);
  border-left-color: var(--gold);
}
.npc-icon {
  font-size: 18px;
}
.npc-name {
  font-size: 13px;
  color: #e0d5c1;
}

/* NPC对话弹窗 */
.npc-dialog-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;
  backdrop-filter: blur(4px);
}
.npc-dialog {
  width: 520px;
  background: linear-gradient(180deg, #2a2520 0%, #1a1815 100%);
  border: 2px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(184,134,11,0.3);
  overflow: hidden;
}
.npc-dialog-header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 20px;
  background: linear-gradient(90deg, rgba(184,134,11,0.15), transparent);
  border-bottom: 1px solid rgba(184,134,11,0.3);
  position: relative;
}
.npc-dialog-portrait {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0,0,0,0.3);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.npc-portrait-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.npc-dialog-info {
  flex: 1;
}
.npc-dialog-name {
  font-size: 18px;
  font-weight: bold;
  color: var(--gold);
}
.npc-dialog-title {
  font-size: 12px;
  color: #c8b898;
  margin-top: 4px;
}
.npc-dialog-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  color: #c8b898;
  font-size: 18px;
  cursor: pointer;
}
.npc-dialog-close:hover {
  color: #fff;
}
.npc-dialog-body {
  padding: 20px;
}
.npc-dialog-desc {
  color: #c8b898;
  margin-bottom: 15px;
  font-style: italic;
}
.npc-dialog-content {
  padding: 15px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  border-left: 3px solid var(--gold);
  margin-bottom: 15px;
}
.npc-dialogue-text {
  font-size: 14px;
  color: #e0d5c1;
  line-height: 1.6;
  margin: 0;
}

/* NPC任务列表 */
.npc-quest-list {
  margin-top: 15px;
}
.npc-quest-title {
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 10px;
  font-weight: bold;
}
.npc-quest-item {
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(0,0,0,0.25);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
}
.npc-quest-name {
  font-size: 14px;
  color: #e0d5c1;
  font-weight: bold;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.quest-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
}
.quest-status.available { background: #22c55e; color: #fff; }
.quest-status.inProgress { background: #3b82f6; color: #fff; }
.quest-status.completed { background: #f59e0b; color: #fff; }
.quest-status.claimed { background: #6b7280; color: #fff; }
.npc-quest-desc {
  font-size: 12px;
  color: #c8b898;
  margin-bottom: 8px;
}
.npc-quest-reward {
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 10px;
}
.npc-quest-btn {
  padding: 6px 16px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  font-weight: bold;
}
.npc-quest-btn.accept {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
}
.npc-quest-btn.claim {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
}

/* ===== 任务系统 ===== */
.quest-item {
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(20,18,14,0.78);
  border-radius: 6px;
  border-left: 3px solid #666;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.25);
}
.quest-item.inProgress { border-left-color: #3b82f6; }
.quest-item.completed { border-left-color: #f59e0b; }
.quest-item.claimed { border-left-color: #6b7280; opacity: 0.6; }
.quest-name {
  font-size: 13px;
  color: #f5ecd9;
  font-weight: bold;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.quest-status-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 8px;
  font-weight: 600;
  letter-spacing: 1px;
}

.quest-status-tag.inProgress {
  background: rgba(184,134,11,0.25);
  color: var(--gold-light);
  border: 1px solid rgba(184,134,11,0.4);
}

.quest-status-tag.completed {
  background: rgba(194,58,43,0.25);
  color: #ff6b5a;
  border: 1px solid rgba(194,58,43,0.5);
  animation: pulse-glow 1.5s ease-in-out infinite;
}

.quest-status-tag.finished {
  background: rgba(74,124,89,0.2);
  color: var(--jade);
  border: 1px solid rgba(74,124,89,0.3);
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(194,58,43,0.3); }
  50% { box-shadow: 0 0 15px rgba(194,58,43,0.6); }
}
.quest-status-tag.inProgress { background: rgba(184,134,11,0.25); color: #f5d78e; border: 1px solid rgba(184,134,11,0.5); }
.quest-status-tag.completed { background: rgba(194,58,43,0.25); color: #ffb4a6; border: 1px solid rgba(194,58,43,0.5); }
.quest-status-tag.claimed { background: rgba(74,124,89,0.2); color: #9fd8b5; border: 1px solid rgba(74,124,89,0.4); }
.quest-status-tag.available { background: rgba(120,140,160,0.2); color: #c8d6e5; border: 1px solid rgba(120,140,160,0.4); }
.quest-progress {
  font-size: 12px;
  color: #ecd9b0;
  margin-bottom: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.quest-desc {
  font-size: 11px;
  color: #d9c9a8;
  margin-bottom: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.quest-reward {
  font-size: 11px;
  color: var(--gold);
}
.quest-empty {
  text-align: center;
  padding: 20px;
  color: #666;
  font-size: 13px;
}

/* ===== 随机事件 ===== */
.event-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  backdrop-filter: blur(6px);
}
.event-modal {
  width: 480px;
  background: linear-gradient(180deg, #2d2418 0%, #1f1a12 50%, #15110a 100%);
  border: 2px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(184,134,11,0.3), 0 30px 80px rgba(0,0,0,0.6);
  overflow: hidden;
  animation: modalIn 0.4s ease;
}
.event-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  background: linear-gradient(90deg, rgba(184,134,11,0.15), transparent);
  border-bottom: 1px solid rgba(184,134,11,0.3);
  position: relative;
}
.event-modal-icon {
  font-size: 24px;
}
.event-modal-title {
  font-size: 20px;
  font-weight: bold;
  color: var(--gold-light);
  letter-spacing: 3px;
  font-family: var(--font-title);
}
.event-modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  color: var(--ink-light);
  font-size: 18px;
  cursor: pointer;
  transition: color 0.2s;
}
.event-modal-close:hover {
  color: var(--vermilion);
}
.event-modal-body {
  padding: 25px;
}
.event-name {
  font-size: 22px;
  color: var(--paper);
  text-align: center;
  margin-bottom: 15px;
  font-weight: bold;
  letter-spacing: 2px;
  font-family: var(--font-title);
}
.event-desc {
  font-size: 14px;
  color: #b8a88a;
  text-align: center;
  line-height: 2;
  margin-bottom: 25px;
  padding: 18px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(184,134,11,0.15);
  border-radius: 6px;
  letter-spacing: 0.5px;
}
.event-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.event-choice-btn {
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(184,134,11,0.12), rgba(194,58,43,0.08));
  border: 1px solid rgba(184,134,11,0.3);
  border-radius: 6px;
  color: var(--paper);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 1px;
  text-align: left;
  font-family: var(--font-body);
}
.event-choice-btn:hover {
  background: linear-gradient(135deg, rgba(184,134,11,0.25), rgba(194,58,43,0.15));
  border-color: var(--gold);
  color: var(--gold-light);
  transform: translateX(4px);
  box-shadow: 0 0 15px rgba(184,134,11,0.2);
}


/* ===== 地图系统样式 ===== */
.map-current-info {
  background: linear-gradient(135deg, rgba(20,15,10,0.95) 0%, rgba(10,8,5,0.98) 100%);
  border: 1px solid rgba(255,215,0,0.4);
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,215,0,0.1);
}

.map-current-name {
  font-size: 17px;
  font-weight: 700;
  color: #bf360c;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 10px rgba(255,215,0,0.3);
}

.map-location-icon {
  font-size: 14px;
}

.map-level-tag {
  font-size: 10px;
  background: rgba(184,134,11,0.25);
  color: var(--gold-light);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(184,134,11,0.4);
  margin-left: auto;
}

.map-current-desc {
  font-size: 13px;
  color: #ffffff;
  line-height: 1.9;
  font-style: normal;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  opacity: 0.95;
}

.map-connected-title {
  font-size: 14px;
  color: #bf360c;
  margin: 16px 0 12px 0;
  letter-spacing: 2px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.map-location {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  margin-bottom: 8px;
  background: rgba(15,12,8,0.8);
  border: 1px solid rgba(184,134,11,0.3);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 2px solid transparent;
}

.map-location:hover {
  background: rgba(184,134,11,0.15);
  border-left-color: var(--gold);
  transform: translateX(3px);
}

.map-location.locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.map-location.locked:hover {
  background: rgba(255,255,255,0.03);
  border-left-color: transparent;
  transform: none;
}

.map-location-name {
  font-size: 14px;
  color: #fff8e7;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.map-location-cost {
  font-size: 11px;
  color: #ffeb99;
  background: rgba(0,0,0,0.6);
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid rgba(255,215,0,0.4);
  font-weight: 600;
}


/* ===== 锻造系统样式 ===== */

































/* ===== 排行榜样式 ===== */
.rank-btn {
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(184,134,11,0.15));
}

.rank-btn:hover {
  background: linear-gradient(135deg, rgba(255,215,0,0.35), rgba(184,134,11,0.25));
}

.ranking-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  animation: fadeIn 0.3s ease;
}

.ranking-modal {
  width: 550px;
  max-width: 90vw;
  max-height: 80vh;
  background: linear-gradient(180deg, #2d2418 0%, #1f1a12 50%, #15110a 100%);
  border: 2px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(184,134,11,0.3), 0 30px 80px rgba(0,0,0,0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalIn 0.4s ease;
}

.ranking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: linear-gradient(90deg, rgba(184,134,11,0.15), transparent);
  border-bottom: 1px solid rgba(184,134,11,0.3);
}

.ranking-header h2 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--gold-light);
  letter-spacing: 3px;
}

.ranking-close {
  background: none;
  border: none;
  color: var(--ink-light);
  font-size: 18px;
  cursor: pointer;
  padding: 5px 10px;
  transition: color 0.2s;
}

.ranking-close:hover {
  color: var(--vermilion);
}

.ranking-tabs {
  display: flex;
  padding: 10px 20px;
  gap: 10px;
  border-bottom: 1px solid rgba(184,134,11,0.2);
}

.ranking-tab {
  flex: 1;
  padding: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(184,134,11,0.2);
  border-radius: 4px;
  color: var(--ink-light);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
}

.ranking-tab:hover {
  background: rgba(184,134,11,0.1);
  color: var(--paper);
}

.ranking-tab.active {
  background: linear-gradient(135deg, rgba(184,134,11,0.25), rgba(194,58,43,0.15));
  border-color: var(--gold);
  color: var(--gold-light);
}

.ranking-my-rank {
  padding: 10px 20px;
  background: rgba(0,0,0,0.2);
  font-size: 13px;
  color: var(--ink-light);
  text-align: center;
  border-bottom: 1px solid rgba(184,134,11,0.1);
}

.ranking-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 20px;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(184,134,11,0.1);
  border-radius: 4px;
  transition: all 0.2s;
}

.ranking-item:hover {
  background: rgba(184,134,11,0.08);
}

.ranking-item.top {
  background: linear-gradient(90deg, rgba(184,134,11,0.1), transparent);
  border-color: rgba(184,134,11,0.3);
}

.ranking-item.me {
  background: linear-gradient(90deg, rgba(194,58,43,0.15), transparent);
  border-color: rgba(194,58,43,0.4);
}

.ranking-num {
  width: 40px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.ranking-name {
  flex: 1;
  font-size: 13px;
  color: var(--paper);
  font-weight: 500;
}

.ranking-sect {
  width: 50px;
  font-size: 11px;
  color: var(--ink-light);
  text-align: center;
}

.ranking-title {
  width: 80px;
  font-size: 10px;
  color: var(--gold);
  text-align: center;
  font-style: italic;
}

.ranking-value {
  width: 70px;
  font-size: 13px;
  color: var(--gold-light);
  font-weight: 600;
  text-align: right;
}


/* ===== 成就系统样式 ===== */
.achievement-btn {
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(184,134,11,0.15));
}

.achievement-btn:hover {
  background: linear-gradient(135deg, rgba(255,215,0,0.35), rgba(184,134,11,0.25));
}

.achievement-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  backdrop-filter: blur(6px);
}

.achievement-modal {
  width: 650px;
  max-width: 90vw;
  max-height: 80vh;
  background: linear-gradient(180deg, #2d2418 0%, #1f1a12 50%, #15110a 100%);
  border: 2px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(184,134,11,0.3), 0 30px 80px rgba(0,0,0,0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalIn 0.4s ease;
}

.achievement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: linear-gradient(90deg, rgba(184,134,11,0.15), transparent);
  border-bottom: 1px solid rgba(184,134,11,0.3);
}

.achievement-header h2 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--gold-light);
  letter-spacing: 3px;
}

.achievement-close {
  background: none;
  border: none;
  color: var(--ink-light);
  font-size: 18px;
  cursor: pointer;
  transition: color 0.2s;
}

.achievement-close:hover {
  color: var(--vermilion);
}

.achievement-stats {
  display: flex;
  padding: 15px 20px;
  gap: 20px;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(184,134,11,0.2);
}

.achievement-stat {
  flex: 1;
  text-align: center;
}

.achievement-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #bf360c;
  text-shadow: 0 0 10px rgba(255,215,0,0.3);
}

.achievement-stat-label {
  font-size: 12px;
  color: #b8a88a;
  margin-top: 4px;
}

.achievement-tabs {
  display: flex;
  padding: 10px 20px;
  gap: 8px;
  border-bottom: 1px solid rgba(184,134,11,0.2);
  flex-wrap: wrap;
}

.achievement-tab {
  padding: 6px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(184,134,11,0.2);
  border-radius: 4px;
  color: #b8a88a;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.achievement-tab:hover {
  background: rgba(184,134,11,0.1);
  color: #e0d5c1;
}

.achievement-tab.active {
  background: linear-gradient(135deg, rgba(184,134,11,0.25), rgba(194,58,43,0.15));
  border-color: var(--gold);
  color: var(--gold-light);
}

.achievement-list {
  flex: 1;
  overflow-y: auto;
  padding: 15px 20px;
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(184,134,11,0.15);
  border-radius: 6px;
  transition: all 0.2s;
}

.achievement-item.unlocked {
  background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(184,134,11,0.05));
  border-color: rgba(255,215,0,0.3);
}

.achievement-item.locked {
  opacity: 0.6;
}

.achievement-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  border: 1px solid rgba(184,134,11,0.2);
}

.achievement-item.unlocked .achievement-icon {
  background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(184,134,11,0.1));
  border-color: rgba(255,215,0,0.4);
}

.achievement-info {
  flex: 1;
}

.achievement-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff8e7;
  margin-bottom: 4px;
}

.achievement-item.unlocked .achievement-name {
  color: #bf360c;
}

.achievement-desc {
  font-size: 12px;
  color: #b8a88a;
  margin-bottom: 4px;
}

.achievement-reward {
  font-size: 11px;
  color: #78909c;
}

.achievement-points {
  text-align: center;
  min-width: 50px;
}

.points-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #bf360c;
}

.points-label {
  font-size: 10px;
  color: #78909c;
}

/* 成就解锁提示 */
.achievement-toast {
  position: fixed;
  top: 80px;
  right: 20px;
  width: 320px;
  background: linear-gradient(135deg, #2d2418 0%, #1f1a12 100%);
  border: 2px solid #bf360c;
  border-radius: 10px;
  padding: 15px;
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 1000;
  box-shadow: 0 0 30px rgba(255,215,0,0.4), 0 10px 30px rgba(0,0,0,0.5);
  animation: achievementToastIn 0.5s ease;
}

@keyframes achievementToastIn {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.achievement-toast-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(184,134,11,0.1));
  border-radius: 8px;
  border: 1px solid rgba(255,215,0,0.4);
}

.achievement-toast-info {
  flex: 1;
}

.achievement-toast-title {
  font-size: 12px;
  color: #bf360c;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: 1px;
}

.achievement-toast-name {
  font-size: 16px;
  color: #fff8e7;
  font-weight: 700;
  margin-bottom: 4px;
}

.achievement-toast-desc {
  font-size: 11px;
  color: #b8a88a;
}


/* ===== 邮件系统样式 ===== */
.mail-btn {
  position: relative;
  background: linear-gradient(135deg, rgba(100,180,255,0.2), rgba(50,100,200,0.15));
}

.mail-btn:hover {
  background: linear-gradient(135deg, rgba(100,180,255,0.35), rgba(50,100,200,0.25));
}

.mail-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  background: #c23a2b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1px solid #fff;
}

.mail-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  backdrop-filter: blur(6px);
}

.mail-modal {
  width: 700px;
  max-width: 90vw;
  max-height: 80vh;
  background: linear-gradient(180deg, #2d2418 0%, #1f1a12 50%, #15110a 100%);
  border: 2px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(184,134,11,0.3), 0 30px 80px rgba(0,0,0,0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalIn 0.4s ease;
}

.mail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: linear-gradient(90deg, rgba(184,134,11,0.15), transparent);
  border-bottom: 1px solid rgba(184,134,11,0.3);
}

.mail-header h2 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--gold-light);
  letter-spacing: 3px;
}

.mail-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mail-claim-all-btn {
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #1a1208;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.mail-claim-all-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(184,134,11,0.4);
}

.mail-claim-all-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mail-close {
  background: none;
  border: none;
  color: var(--ink-light);
  font-size: 18px;
  cursor: pointer;
}

.mail-close:hover {
  color: var(--vermilion);
}

.mail-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.mail-list {
  width: 280px;
  border-right: 1px solid rgba(184,134,11,0.2);
  overflow-y: auto;
  padding: 10px;
}

.mail-empty {
  text-align: center;
  color: #78909c;
  padding: 40px 20px;
  font-size: 14px;
}

.mail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(184,134,11,0.15);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.mail-item:hover {
  background: rgba(184,134,11,0.1);
  border-color: rgba(184,134,11,0.3);
}

.mail-item.selected {
  background: linear-gradient(135deg, rgba(184,134,11,0.2), rgba(194,58,43,0.1));
  border-color: var(--gold);
}

.mail-item.unread {
  border-left: 3px solid #bf360c;
}

.mail-item-icon {
  font-size: 20px;
}

.mail-item-info {
  flex: 1;
  min-width: 0;
}

.mail-item-title {
  font-size: 13px;
  font-weight: 600;
  color: #e0d5c1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.mail-item.unread .mail-item-title {
  color: #bf360c;
}

.mail-item-sender {
  font-size: 11px;
  color: #78909c;
}

.mail-item-reward {
  font-size: 16px;
}

.mail-detail {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.mail-detail-empty {
  text-align: center;
  color: #78909c;
  padding: 60px 20px;
  font-size: 14px;
}

.mail-detail-title {
  font-size: 18px;
  font-weight: 700;
  color: #bf360c;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(184,134,11,0.2);
}

.mail-detail-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #78909c;
  margin-bottom: 15px;
}

.mail-detail-content {
  font-size: 14px;
  color: #e0d5c1;
  line-height: 1.8;
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
  border-left: 3px solid rgba(184,134,11,0.4);
}

.mail-detail-rewards {
  background: rgba(255,215,0,0.05);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 15px;
}

.mail-rewards-title {
  font-size: 13px;
  color: #bf360c;
  font-weight: 600;
  margin-bottom: 10px;
}

.mail-rewards-list {
  display: flex;
  gap: 15px;
}

.mail-reward-item {
  font-size: 14px;
  color: #e0d5c1;
  background: rgba(0,0,0,0.2);
  padding: 6px 12px;
  border-radius: 4px;
}

.mail-claim-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #1a1208;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.mail-claim-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(184,134,11,0.4);
}

.mail-claimed {
  text-align: center;
  color: #4caf50;
  font-size: 14px;
  padding: 12px;
  background: rgba(76,175,80,0.1);
  border-radius: 6px;
}


/* ===== 副本系统样式 ===== */
.dungeon-btn {
  background: linear-gradient(135deg, rgba(194,58,43,0.25), rgba(139,30,30,0.2));
}

.dungeon-btn:hover {
  background: linear-gradient(135deg, rgba(194,58,43,0.4), rgba(139,30,30,0.3));
}

.dungeon-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  backdrop-filter: blur(6px);
}

.dungeon-modal {
  width: 650px;
  max-width: 90vw;
  max-height: 80vh;
  background: linear-gradient(180deg, #2d2418 0%, #1f1a12 50%, #15110a 100%);
  border: 2px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(184,134,11,0.3), 0 30px 80px rgba(0,0,0,0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalIn 0.4s ease;
}

.dungeon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: linear-gradient(90deg, rgba(194,58,43,0.15), transparent);
  border-bottom: 1px solid rgba(184,134,11,0.3);
}

.dungeon-header h2 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--gold-light);
  letter-spacing: 3px;
}

.dungeon-close {
  background: none;
  border: none;
  color: var(--ink-light);
  font-size: 18px;
  cursor: pointer;
}

.dungeon-close:hover {
  color: var(--vermilion);
}

.dungeon-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.dungeon-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dungeon-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(184,134,11,0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.dungeon-card:hover:not(.locked) {
  background: rgba(184,134,11,0.1);
  border-color: rgba(184,134,11,0.4);
  transform: translateX(5px);
}

.dungeon-card.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.dungeon-card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: linear-gradient(135deg, rgba(194,58,43,0.2), rgba(139,30,30,0.1));
  border-radius: 8px;
  border: 1px solid rgba(194,58,43,0.3);
}

.dungeon-card-info {
  flex: 1;
}

.dungeon-card-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff8e7;
  margin-bottom: 5px;
}

.dungeon-card-level {
  font-size: 12px;
  color: #bf360c;
  margin-bottom: 3px;
}

.dungeon-card-location {
  font-size: 11px;
  color: #78909c;
  margin-bottom: 3px;
}

.dungeon-card-count {
  font-size: 11px;
  color: #b8a88a;
}

.dungeon-card-status {
  font-size: 12px;
  font-weight: 600;
  color: #4caf50;
}

.dungeon-card.locked .dungeon-card-status {
  color: #78909c;
}

.dungeon-detail {
  animation: fadeIn 0.3s ease;
}

.dungeon-back {
  background: none;
  border: none;
  color: #b8a88a;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 15px;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.2s;
}

.dungeon-back:hover {
  background: rgba(184,134,11,0.1);
  color: #bf360c;
}

.dungeon-detail-header {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(184,134,11,0.2);
}

.dungeon-detail-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background: linear-gradient(135deg, rgba(194,58,43,0.2), rgba(139,30,30,0.1));
  border-radius: 10px;
  border: 1px solid rgba(194,58,43,0.3);
}

.dungeon-detail-name {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #bf360c;
}

.dungeon-detail-desc {
  font-size: 13px;
  color: #b8a88a;
  line-height: 1.6;
}

.dungeon-stages {
  margin-bottom: 20px;
}

.dungeon-stages-title {
  font-size: 14px;
  color: #bf360c;
  font-weight: 600;
  margin-bottom: 10px;
}

.dungeon-stage {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
  margin-bottom: 8px;
  border-left: 3px solid rgba(184,134,11,0.3);
}

.dungeon-stage-num {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #1a1208;
  font-weight: 700;
  font-size: 14px;
  border-radius: 50%;
}

.dungeon-stage-name {
  font-size: 13px;
  color: #e0d5c1;
  font-weight: 600;
  margin-bottom: 3px;
}

.dungeon-stage-monster {
  font-size: 11px;
  color: #78909c;
}

.dungeon-rewards {
  background: rgba(255,215,0,0.05);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.dungeon-rewards-title {
  font-size: 14px;
  color: #bf360c;
  font-weight: 600;
  margin-bottom: 10px;
}

.dungeon-rewards-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dungeon-reward-item {
  font-size: 13px;
  color: #e0d5c1;
  background: rgba(0,0,0,0.2);
  padding: 6px 12px;
  border-radius: 4px;
}

.dungeon-enter-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #c23a2b, #8b1e1e);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 2px;
}

.dungeon-enter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(194,58,43,0.4);
}


/* ===== 装备品质系统样式 ===== */
.equip-quality-white {
  border-color: rgba(255,255,255,0.5) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)) !important;
}

.equip-quality-green {
  border-color: rgba(76,175,80,0.6) !important;
  background: linear-gradient(135deg, rgba(76,175,80,0.12), rgba(76,175,80,0.05)) !important;
  box-shadow: 0 0 8px rgba(76,175,80,0.2);
}

.equip-quality-blue {
  border-color: rgba(33,150,243,0.6) !important;
  background: linear-gradient(135deg, rgba(33,150,243,0.12), rgba(33,150,243,0.05)) !important;
  box-shadow: 0 0 10px rgba(33,150,243,0.25);
}

.equip-quality-purple {
  border-color: rgba(156,39,176,0.6) !important;
  background: linear-gradient(135deg, rgba(156,39,176,0.15), rgba(156,39,176,0.06)) !important;
  box-shadow: 0 0 12px rgba(156,39,176,0.3);
}

.equip-quality-orange {
  border-color: rgba(255,152,0,0.7) !important;
  background: linear-gradient(135deg, rgba(255,152,0,0.18), rgba(255,152,0,0.08)) !important;
  box-shadow: 0 0 15px rgba(255,152,0,0.35);
  animation: orangeGlow 2s ease-in-out infinite;
}

@keyframes orangeGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(255,152,0,0.35); }
  50% { box-shadow: 0 0 25px rgba(255,152,0,0.55); }
}

.equip-quality-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
}

.quality-tag-white { background: rgba(255,255,255,0.2); color: #fff; }
.quality-tag-green { background: rgba(76,175,80,0.3); color: #4caf50; }
.quality-tag-blue { background: rgba(33,150,243,0.3); color: #2196f3; }
.quality-tag-purple { background: rgba(156,39,176,0.3); color: #9c27b0; }
.quality-tag-orange { background: rgba(255,152,0,0.3); color: #ff9800; }


/* ===== 签到系统样式 ===== */
.signin-btn {
  position: relative;
  background: linear-gradient(135deg, rgba(76,175,80,0.25), rgba(46,125,50,0.2));
}

.signin-btn:hover {
  background: linear-gradient(135deg, rgba(76,175,80,0.4), rgba(46,125,50,0.3));
}

.signin-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  background: #ff5722;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
}

.signin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  backdrop-filter: blur(6px);
}

.signin-modal {
  width: 550px;
  max-width: 90vw;
  background: linear-gradient(180deg, #2d2418 0%, #1f1a12 50%, #15110a 100%);
  border: 2px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(184,134,11,0.3), 0 30px 80px rgba(0,0,0,0.6);
  overflow: hidden;
  animation: modalIn 0.4s ease;
}

.signin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: linear-gradient(90deg, rgba(76,175,80,0.15), transparent);
  border-bottom: 1px solid rgba(184,134,11,0.3);
}

.signin-header h2 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--gold-light);
  letter-spacing: 3px;
}

.signin-close {
  background: none;
  border: none;
  color: var(--ink-light);
  font-size: 18px;
  cursor: pointer;
}

.signin-close:hover {
  color: var(--vermilion);
}

.signin-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(184,134,11,0.2);
}

.signin-continuous-label {
  font-size: 13px;
  color: #b8a88a;
  margin-right: 10px;
}

.signin-continuous-value {
  font-size: 20px;
  font-weight: 700;
  color: #bf360c;
}

.signin-status {
  font-size: 13px;
  color: #4caf50;
  font-weight: 600;
}

.signin-rewards {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  padding: 20px;
}

.signin-day {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(184,134,11,0.2);
  border-radius: 8px;
  padding: 10px 5px;
  text-align: center;
  transition: all 0.2s;
}

.signin-day.signed {
  background: linear-gradient(135deg, rgba(76,175,80,0.15), rgba(46,125,50,0.1));
  border-color: rgba(76,175,80,0.4);
}

.signin-day.today {
  border-color: #bf360c;
  box-shadow: 0 0 10px rgba(255,215,0,0.3);
  animation: todayPulse 1.5s ease-in-out infinite;
}

@keyframes todayPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255,215,0,0.3); }
  50% { box-shadow: 0 0 20px rgba(255,215,0,0.5); }
}

.signin-day-num {
  font-size: 11px;
  color: #78909c;
  margin-bottom: 5px;
}

.signin-day-icon {
  font-size: 20px;
  margin-bottom: 5px;
}

.signin-day.signed .signin-day-icon {
  color: #4caf50;
}

.signin-day-reward {
  font-size: 10px;
  color: #b8a88a;
  line-height: 1.4;
}

.signin-submit-btn {
  width: calc(100% - 40px);
  margin: 0 20px 20px;
  padding: 14px;
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 2px;
}

.signin-submit-btn:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76,175,80,0.4);
}

.signin-submit-btn.disabled {
  background: #555;
  cursor: not-allowed;
  opacity: 0.6;
}


/* ===== 好友系统样式 ===== */
.friend-btn {
  position: relative;
  background: linear-gradient(135deg, rgba(33,150,243,0.25), rgba(13,71,161,0.2));
}

.friend-btn:hover {
  background: linear-gradient(135deg, rgba(33,150,243,0.4), rgba(13,71,161,0.3));
}

.friend-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: #2196f3;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
}

.friend-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  backdrop-filter: blur(6px);
}

.friend-modal {
  width: 500px;
  max-width: 90vw;
  max-height: 80vh;
  background: linear-gradient(180deg, #2d2418 0%, #1f1a12 50%, #15110a 100%);
  border: 2px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(184,134,11,0.3), 0 30px 80px rgba(0,0,0,0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalIn 0.4s ease;
}

.friend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: linear-gradient(90deg, rgba(33,150,243,0.15), transparent);
  border-bottom: 1px solid rgba(184,134,11,0.3);
}

.friend-header h2 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--gold-light);
  letter-spacing: 3px;
}

.friend-close {
  background: none;
  border: none;
  color: var(--ink-light);
  font-size: 18px;
  cursor: pointer;
}

.friend-close:hover {
  color: var(--vermilion);
}

.friend-tabs {
  display: flex;
  padding: 10px 20px 0;
  gap: 10px;
  border-bottom: 1px solid rgba(184,134,11,0.2);
}

.friend-tab {
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: #78909c;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.friend-tab.active {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
}

.friend-content {
  flex: 1;
  overflow-y: auto;
  padding: 15px 20px;
}

.friend-empty {
  text-align: center;
  color: #78909c;
  padding: 40px 0;
  font-size: 14px;
}

.friend-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(184,134,11,0.15);
  border-radius: 8px;
  margin-bottom: 10px;
  transition: all 0.2s;
}

.friend-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(184,134,11,0.3);
}

.friend-avatar {
  position: relative;
  margin-right: 12px;
}

.friend-avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  border: 2px solid rgba(184,134,11,0.4);
}

.friend-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #1f1a12;
}

.friend-info {
  flex: 1;
}

.friend-name {
  font-size: 15px;
  font-weight: 600;
  color: #e0d5c1;
  margin-bottom: 3px;
}

.friend-meta {
  font-size: 12px;
  color: #78909c;
}

.friend-actions {
  display: flex;
  gap: 6px;
}

.friend-btn {
  padding: 6px 10px;
  border: none;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.friend-btn.add {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: #fff;
}

.friend-btn.add:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(76,175,80,0.3);
}

.friend-btn.chat {
  background: linear-gradient(135deg, #2196f3, #1565c0);
  color: #fff;
}

.friend-btn.remove {
  background: rgba(244,67,54,0.2);
  color: #f44336;
}

.friend-btn.remove:hover {
  background: rgba(244,67,54,0.4);
}

.friend-already {
  font-size: 12px;
  color: #4caf50;
  padding: 6px 10px;
}

.friend-footer {
  padding: 12px 20px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(184,134,11,0.2);
  font-size: 12px;
  color: #78909c;
  text-align: center;
}


/* ===== 技能系统样式 ===== */
.skill-btn {
  position: relative;
  background: linear-gradient(135deg, rgba(255,152,0,0.25), rgba(230,81,0,0.2));
}

.skill-btn:hover {
  background: linear-gradient(135deg, rgba(255,152,0,0.4), rgba(230,81,0,0.3));
}

.skill-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: #ff9800;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
}

.skill-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  backdrop-filter: blur(6px);
}

.skill-modal {
  width: 550px;
  max-width: 90vw;
  max-height: 80vh;
  background: linear-gradient(180deg, #2d2418 0%, #1f1a12 50%, #15110a 100%);
  border: 2px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(184,134,11,0.3), 0 30px 80px rgba(0,0,0,0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalIn 0.4s ease;
}

.skill-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: linear-gradient(90deg, rgba(255,152,0,0.15), transparent);
  border-bottom: 1px solid rgba(184,134,11,0.3);
}

.skill-header h2 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--gold-light);
  letter-spacing: 3px;
}

.skill-points {
  font-size: 14px;
  color: #ff9800;
  font-weight: 600;
}

.skill-close {
  background: none;
  border: none;
  color: var(--ink-light);
  font-size: 18px;
  cursor: pointer;
}

.skill-close:hover {
  color: var(--vermilion);
}

.skill-list {
  flex: 1;
  overflow-y: auto;
  padding: 15px 20px;
}

.skill-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(184,134,11,0.15);
  border-radius: 8px;
  margin-bottom: 12px;
  transition: all 0.2s;
}

.skill-item.learned {
  border-color: rgba(255,152,0,0.3);
}

.skill-item.not-learned {
  opacity: 0.5;
}

.skill-item:hover {
  background: rgba(255,255,255,0.05);
}

.skill-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,152,0,0.3), rgba(230,81,0,0.2));
  border: 1px solid rgba(255,152,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #bf360c;
  margin-right: 15px;
  flex-shrink: 0;
}

.skill-info {
  flex: 1;
}

.skill-name {
  font-size: 16px;
  font-weight: 600;
  color: #e0d5c1;
  margin-bottom: 4px;
}

.skill-level {
  font-size: 13px;
  color: #ff9800;
  font-weight: 600;
}

.skill-desc {
  font-size: 12px;
  color: #78909c;
  margin-bottom: 6px;
}

.skill-stats {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #b8a88a;
}

.skill-action {
  flex-shrink: 0;
  margin-left: 15px;
}

.skill-upgrade-btn {
  padding: 8px 14px;
  background: linear-gradient(135deg, #ff9800, #e65100);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.skill-upgrade-btn:hover:not(.disabled) {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(255,152,0,0.3);
}

.skill-upgrade-btn.disabled {
  background: #555;
  cursor: not-allowed;
  opacity: 0.6;
}

.skill-not-learned {
  font-size: 12px;
  color: #78909c;
}

.skill-max {
  font-size: 12px;
  color: #bf360c;
  font-weight: 600;
}

.skill-footer {
  padding: 12px 20px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(184,134,11,0.2);
  font-size: 12px;
  color: #78909c;
  text-align: center;
}


/* ===== 装备品质标签样式 ===== */
.equip-quality-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  vertical-align: middle;
}

.equip-quality-text-white { color: #ffffff; }
.equip-quality-text-green { color: #4caf50; }
.equip-quality-text-blue { color: #2196f3; }
.equip-quality-text-purple { color: #9c27b0; }
.equip-quality-text-orange { color: #ff9800; }

.equip-quality-tag.white { background: rgba(255,255,255,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.equip-quality-tag.green { background: rgba(76,175,80,0.2); color: #4caf50; border: 1px solid rgba(76,175,80,0.4); }
.equip-quality-tag.blue { background: rgba(33,150,243,0.2); color: #2196f3; border: 1px solid rgba(33,150,243,0.4); }
.equip-quality-tag.purple { background: rgba(156,39,176,0.2); color: #9c27b0; border: 1px solid rgba(156,39,176,0.4); }
.equip-quality-tag.orange { background: rgba(255,152,0,0.2); color: #ff9800; border: 1px solid rgba(255,152,0,0.4); }


/* ===== 锻造品质样式 ===== */


/* ===== 背包物品品质边框 ===== */
.bag-item-icon.equip-quality-white { border: 2px solid rgba(255,255,255,0.6); }
.bag-item-icon.equip-quality-green { border: 2px solid rgba(76,175,80,0.8); box-shadow: 0 0 6px rgba(76,175,80,0.3); }
.bag-item-icon.equip-quality-blue { border: 2px solid rgba(33,150,243,0.8); box-shadow: 0 0 6px rgba(33,150,243,0.3); }
.bag-item-icon.equip-quality-purple { border: 2px solid rgba(156,39,176,0.8); box-shadow: 0 0 8px rgba(156,39,176,0.4); }
.bag-item-icon.equip-quality-orange {
  border: 2px solid rgba(255,152,0,0.9);
  box-shadow: 0 0 10px rgba(255,152,0,0.5);
  animation: orangeGlow 2s ease-in-out infinite;
}

@keyframes orangeGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(255,152,0,0.5); }
  50% { box-shadow: 0 0 16px rgba(255,152,0,0.7); }
}

/* ===== UI交互优化 ===== */
.top-btn {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.top-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
  transition: left 0.5s ease;
}

.top-btn:hover::before {
  left: 100%;
}

.top-btn:hover {
  transform: translateY(-2px) scale(1.08);
  background: rgba(200, 55, 45, 0.85);
  border-color: #bf360c;
  color: #fff;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.top-btn:active {
  transform: translateY(0);
}

.bag-slot {
  transition: all 0.15s ease;
}

.bag-slot:hover {
  transform: scale(1.05);
  z-index: 10;
}

.equip-icon {
  transition: all 0.2s ease;
}

.equip-icon:hover {
  transform: scale(1.1);
}

/* 弹窗动画优化 */
@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 按钮点击反馈 */
.skill-upgrade-btn:active,
.signin-submit-btn:active,
.friend-btn:active {
  transform: translateY(1px) scale(0.98);
}

/* 滚动条美化 */
.skill-list::-webkit-scrollbar,
.friend-content::-webkit-scrollbar,
.signin-rewards::-webkit-scrollbar {
  width: 6px;
}

.skill-list::-webkit-scrollbar-track,
.friend-content::-webkit-scrollbar-track,
.signin-rewards::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}

.skill-list::-webkit-scrollbar-thumb,
.friend-content::-webkit-scrollbar-thumb,
.signin-rewards::-webkit-scrollbar-thumb {
  background: rgba(184,134,11,0.4);
  border-radius: 3px;
}

.skill-list::-webkit-scrollbar-thumb:hover,
.friend-content::-webkit-scrollbar-thumb:hover,
.signin-rewards::-webkit-scrollbar-thumb:hover {
  background: rgba(184,134,11,0.6);
}


/* ===== 弹窗背景图系统 ===== */
.modal-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.modal-content-wrapper {
  position: relative;
  z-index: 1;
}

/* 商店弹窗背景 */

/* 战斗弹窗背景 */
.battle-modal {
  position: relative;
  background-image: url('../assets/img/modal-bg/battle-scene.png');
  background-size: cover;
  background-position: center;
}
.battle-modal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(45,20,20,0.85) 0%, rgba(31,15,15,0.9) 100%);
  z-index: 0;
}
.battle-modal > * {
  position: relative;
  z-index: 1;
}

/* NPC对话弹窗背景 */
.npc-dialog {
  position: relative;
  background-image: url('../assets/img/modal-bg/npc.png');
  background-size: cover;
  background-position: center;
}
.npc-dialog::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(60,50,35,0.82) 0%, rgba(45,38,28,0.88) 100%);
  z-index: 0;
}
.npc-dialog > * {
  position: relative;
  z-index: 1;
}

/* 随机事件弹窗背景 */
.event-modal {
  position: relative;
  background-image: url('../assets/img/modal-bg/event.png');
  background-size: cover;
  background-position: center;
}
.event-modal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,30,35,0.92) 0%, rgba(10,22,28,0.95) 100%);
  z-index: 0;
  pointer-events: none;
}
.event-modal > * {
  position: relative;
  z-index: 1;
}
/* 随机事件文字颜色增强 */
.event-name {
  color: #bf360c !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.event-desc {
  color: #e8e0d0 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  line-height: 1.8;
}
.event-choice-btn {
  background: rgba(45,36,24,0.9) !important;
  color: #bf360c !important;
  border: 1px solid rgba(255,215,0,0.5) !important;
}
.event-choice-btn:hover {
  background: rgba(255,215,0,0.2) !important;
  color: #fff !important;
}

/* 锻造弹窗背景 */

/* 排行榜弹窗背景 */
.ranking-modal {
  position: relative;
  background-image: url('../assets/img/modal-bg/ranking.png');
  background-size: cover;
  background-position: center;
}
.ranking-modal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(50,25,25,0.85) 0%, rgba(35,18,18,0.9) 100%);
  z-index: 0;
}
.ranking-modal > * {
  position: relative;
  z-index: 1;
}

/* 成就弹窗背景 */
.achievement-modal {
  position: relative;
  background-image: url('../assets/img/modal-bg/achievement.png');
  background-size: cover;
  background-position: center;
}
.achievement-modal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(50,35,15,0.85) 0%, rgba(35,25,12,0.9) 100%);
  z-index: 0;
}
.achievement-modal > * {
  position: relative;
  z-index: 1;
}

/* 邮件弹窗背景 */
.mail-modal {
  position: relative;
  background-image: url('../assets/img/modal-bg/mail.png');
  background-size: cover;
  background-position: center;
}
.mail-modal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(55,45,30,0.82) 0%, rgba(40,33,22,0.88) 100%);
  z-index: 0;
}
.mail-modal > * {
  position: relative;
  z-index: 1;
}

/* 副本弹窗背景 */
.dungeon-modal {
  position: relative;
  background-image: url('../assets/img/modal-bg/dungeon.png');
  background-size: cover;
  background-position: center;
}
.dungeon-modal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35,25,55,0.85) 0%, rgba(22,18,40,0.9) 100%);
  z-index: 0;
}
.dungeon-modal > * {
  position: relative;
  z-index: 1;
}

/* 签到弹窗背景 */
.signin-modal {
  position: relative;
  background-image: url('../assets/img/modal-bg/signin.png');
  background-size: cover;
  background-position: center;
}
.signin-modal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(55,25,25,0.82) 0%, rgba(40,18,18,0.88) 100%);
  z-index: 0;
}
.signin-modal > * {
  position: relative;
  z-index: 1;
}

/* 好友弹窗背景 */
.friend-modal {
  position: relative;
  background-image: url('../assets/img/modal-bg/friend.png');
  background-size: cover;
  background-position: center;
}
.friend-modal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30,45,35,0.82) 0%, rgba(22,35,28,0.88) 100%);
  z-index: 0;
}
.friend-modal > * {
  position: relative;
  z-index: 1;
}

/* 技能弹窗背景 */
.skill-modal {
  position: relative;
  background-image: url('../assets/img/modal-bg/skill-scene.png');
  background-size: cover;
  background-position: center;
}
.skill-modal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,30,55,0.85) 0%, rgba(15,22,40,0.9) 100%);
  z-index: 0;
}
.skill-modal > * {
  position: relative;
  z-index: 1;
}

/* 物品详情弹窗背景 */
.item-modal {
  position: relative;
  background-image: url('../assets/img/modal-bg/item-scene.png');
  background-size: cover;
  background-position: center;
}
.item-modal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(55,45,25,0.82) 0%, rgba(40,33,18,0.88) 100%);
  z-index: 0;
}
.item-modal > * {
  position: relative;
  z-index: 1;
}


/* ===== 修炼系统 ===== */
.cultivation-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  animation: fadeIn 0.3s ease;
}

.cultivation-modal {
  width: 520px;
  max-width: 92vw;
  max-height: 85vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 2px solid #bf360c;
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(255, 215, 0, 0.3), inset 0 0 30px rgba(255, 215, 0, 0.05);
  position: relative;
}

.cultivation-modal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,20,40,0.85) 0%, rgba(15,25,50,0.9) 100%);
  z-index: 0;
  pointer-events: none;
}

.cultivation-modal > * {
  position: relative;
  z-index: 1;
}

.cultivation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.3);
  background: linear-gradient(90deg, rgba(255,215,0,0.1), transparent);
}

.cultivation-header h2 {
  margin: 0;
  color: #bf360c;
  font-size: 20px;
  letter-spacing: 4px;
  font-family: var(--font-title);
}

.cultivation-close {
  background: none;
  border: none;
  color: #aaa;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}
.cultivation-close:hover { color: #bf360c; }

.cultivation-body {
  padding: 20px;
}

.cultivation-current {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(255, 215, 0, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 8px;
}

.cultivation-realm-icon {
  width: 60px;
  height: 60px;
  border: 2px solid;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: bold;
  background: rgba(0,0,0,0.3);
  box-shadow: 0 0 20px currentColor;
}

.cultivation-realm-info {
  flex: 1;
}

.cultivation-realm-name {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 3px;
  margin-bottom: 4px;
}

.cultivation-realm-sub {
  color: #aaa;
  font-size: 13px;
}

.cultivation-progress-section {
  margin-bottom: 20px;
}

.cultivation-progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #e0d5c1;
  font-size: 13px;
}

.cultivation-progress-bar {
  height: 16px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 8px;
  overflow: hidden;
}

.cultivation-progress-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
  box-shadow: 0 0 10px currentColor;
}

.cultivation-stats {
  margin-bottom: 20px;
}

.cultivation-stats-title {
  color: #bf360c;
  font-size: 14px;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.cultivation-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.cultivation-stat {
  background: rgba(0,0,0,0.3);
  padding: 8px;
  border-radius: 6px;
  text-align: center;
  border: 1px solid rgba(255,215,0,0.15);
}

.cultivation-stat .stat-label {
  display: block;
  color: #aaa;
  font-size: 11px;
  margin-bottom: 4px;
}

.cultivation-stat .stat-value {
  display: block;
  color: #4caf50;
  font-size: 16px;
  font-weight: bold;
}

.cultivation-next-stats {
  padding: 10px;
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 6px;
}

.next-stats-title {
  color: #4caf50;
  font-size: 12px;
  margin-bottom: 6px;
}

.next-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  color: #81c784;
  font-size: 11px;
}

.cultivation-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.cultivate-btn, .breakthrough-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-family: var(--font-body);
  cursor: pointer;
  letter-spacing: 2px;
  transition: all 0.3s;
}

.cultivate-btn {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: white;
}
.cultivate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}
.cultivate-btn.cultivating {
  animation: pulse 1s infinite;
}

.breakthrough-btn {
  background: linear-gradient(135deg, #ff9800, #e65100);
  color: white;
}
.breakthrough-btn:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
}
.breakthrough-btn.breaking {
  animation: pulse 0.8s infinite;
}
.breakthrough-btn.disabled {
  background: #555;
  cursor: not-allowed;
  opacity: 0.6;
}

.breakthrough-result {
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  animation: fadeIn 0.5s ease;
}
.breakthrough-result.success {
  background: rgba(76, 175, 80, 0.2);
  border: 1px solid #4caf50;
  color: #81c784;
}
.breakthrough-result.fail {
  background: rgba(244, 67, 54, 0.2);
  border: 1px solid #f44336;
  color: #ef9a9a;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* 修炼按钮 */


/* ===== 宗门系统 ===== */
.sect-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  animation: fadeIn 0.3s ease;
}

.sect-modal {
  width: 680px;
  max-width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #2d1810 0%, #1a0f08 100%);
  border: 2px solid #b8860b;
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(184, 134, 11, 0.3);
  position: relative;
}

.sect-modal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/img/modal-bg/sect.png') center/cover;
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
}

.sect-modal > * {
  position: relative;
  z-index: 1;
}

.sect-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(184, 134, 11, 0.3);
  background: linear-gradient(90deg, rgba(184,134,11,0.15), transparent);
}

.sect-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sect-header-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  color: white;
  border: 2px solid rgba(255,215,0,0.5);
  box-shadow: 0 0 15px rgba(255,215,0,0.3);
}

.sect-header h2 {
  margin: 0;
  color: #bf360c;
  font-size: 20px;
  letter-spacing: 3px;
}

.sect-header-sub {
  color: #aaa;
  font-size: 12px;
  margin-top: 4px;
  display: flex;
  gap: 12px;
}

.sect-close {
  background: none;
  border: none;
  color: #aaa;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}
.sect-close:hover { color: #bf360c; }

.sect-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(184, 134, 11, 0.2);
}

.sect-tab {
  flex: 1;
  padding: 8px 12px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(184, 134, 11, 0.2);
  color: #aaa;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.3s;
  border-radius: 6px 6px 0 0;
}
.sect-tab:hover {
  color: #bf360c;
  background: rgba(184,134,11,0.1);
}
.sect-tab.active {
  background: rgba(184,134,11,0.2);
  color: #bf360c;
  border-color: #b8860b;
}

.sect-body {
  padding: 20px;
}

/* 宗门选择界面 */
.sect-select-modal {
  width: 720px;
}

.sect-select-desc {
  text-align: center;
  color: #e0d5c1;
  font-size: 14px;
  margin-bottom: 20px;
  padding: 10px;
  background: rgba(184,134,11,0.1);
  border-radius: 6px;
}

.sect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.sect-card {
  padding: 16px;
  background: rgba(0,0,0,0.4);
  border: 2px solid rgba(184,134,11,0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}
.sect-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(184,134,11,0.3);
}
.sect-card.selected {
  border-color: #bf360c;
  background: rgba(255,215,0,0.1);
  box-shadow: 0 0 20px rgba(255,215,0,0.3);
}

.sect-card-badge {
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  color: white;
  border: 2px solid rgba(255,255,255,0.3);
}

.sect-card-name {
  color: #bf360c;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.sect-card-master {
  color: #aaa;
  font-size: 11px;
  margin-bottom: 2px;
}

.sect-card-members {
  color: #888;
  font-size: 11px;
  margin-bottom: 6px;
}

.sect-card-desc {
  color: #999;
  font-size: 10px;
  line-height: 1.4;
}

.sect-select-action {
  text-align: center;
}

.sect-join-btn {
  padding: 12px 40px;
  background: linear-gradient(135deg, #b8860b, #455a64);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  letter-spacing: 3px;
  transition: all 0.3s;
}
.sect-join-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(184,134,11,0.4);
}

/* 宗门大厅 */
.sect-notice {
  padding: 12px 16px;
  background: rgba(184,134,11,0.1);
  border: 1px solid rgba(184,134,11,0.3);
  border-radius: 8px;
  margin-bottom: 16px;
}

.sect-notice-title {
  color: #bf360c;
  font-size: 13px;
  margin-bottom: 6px;
}

.sect-notice-content {
  color: #e0d5c1;
  font-size: 13px;
  line-height: 1.6;
}

.sect-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.sect-info-item {
  padding: 10px;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  text-align: center;
}

.sect-info-label {
  color: #888;
  font-size: 11px;
  margin-bottom: 4px;
}

.sect-info-value {
  color: #e0d5c1;
  font-size: 14px;
  font-weight: bold;
}

.sect-bonus, .sect-skills {
  padding: 12px 16px;
  background: rgba(76,175,80,0.1);
  border: 1px solid rgba(76,175,80,0.3);
  border-radius: 8px;
  margin-bottom: 12px;
}

.sect-bonus-title, .sect-skills-title {
  color: #81c784;
  font-size: 13px;
  margin-bottom: 8px;
}

.sect-bonus-list, .sect-skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sect-bonus-item, .sect-skill-item {
  padding: 4px 10px;
  background: rgba(76,175,80,0.2);
  border-radius: 4px;
  color: #a5d6a7;
  font-size: 12px;
}

.sect-leave-btn {
  width: 100%;
  padding: 10px;
  background: rgba(244,67,54,0.2);
  border: 1px solid rgba(244,67,54,0.5);
  color: #ef9a9a;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.3s;
}
.sect-leave-btn:hover {
  background: rgba(244,67,54,0.3);
}

/* 成员列表 */
.sect-members-header, .sect-member-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px 12px;
  align-items: center;
}

.sect-members-header {
  background: rgba(184,134,11,0.2);
  color: #bf360c;
  font-size: 12px;
  font-weight: bold;
  border-radius: 6px 6px 0 0;
}

.sect-member-row {
  border-bottom: 1px solid rgba(184,134,11,0.1);
  color: #e0d5c1;
  font-size: 13px;
}
.sect-member-row:hover {
  background: rgba(184,134,11,0.05);
}

.member-col-status.online { color: #4caf50; }
.member-col-status.offline { color: #888; }

/* 宗门商店 */
.sect-shop-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #e0d5c1;
  font-size: 13px;
}

.sect-shop-hint {
  color: #888;
}

.sect-shop-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sect-shop-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(184,134,11,0.2);
  border-radius: 8px;
}






/* 宗门任务 */
.sect-quest-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(184,134,11,0.2);
  border-radius: 8px;
  margin-bottom: 10px;
}

.sect-quest-item .quest-name {
  color: #f0e6d2;
  font-size: 14px;
  margin-bottom: 4px;
}

.sect-quest-item .quest-desc {
  color: #d8cbb0;
  font-size: 12px;
  margin-bottom: 4px;
}

.sect-quest-item .quest-reward {
  color: #ffd54f;
  font-size: 11px;
}

.quest-accept-btn {
  padding: 8px 20px;
  background: linear-gradient(135deg, #2196f3, #1565c0);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
}
.quest-accept-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(33,150,243,0.4);
}

/* 宗门按钮 */


/* ===== 音乐音效系统 ===== */
.audio-control {
  position: relative;
  display: inline-block;
}

.audio-btn {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 4px;
  background: rgba(45, 36, 24, 0.8);
  color: #d4af37;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.audio-btn:hover {
  background: rgba(212, 175, 55, 0.2);
  border-color: #d4af37;
}

.audio-btn.muted {
  opacity: 0.5;
}

.audio-volume-slider {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 5px;
  padding: 8px 12px;
  background: rgba(30, 24, 16, 0.95);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 4px;
  z-index: 1000;
  white-space: nowrap;
}

.audio-volume-slider input[type=range] {
  width: 80px;
  height: 4px;
  -webkit-appearance: none;
  background: rgba(212, 175, 55, 0.3);
  border-radius: 2px;
  outline: none;
}

.audio-volume-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #d4af37;
  border-radius: 50%;
  cursor: pointer;
}


/* ===== 天气日夜系统 ===== */
.weather-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.time-overlay {
  position: absolute;
  inset: 0;
  transition: background 3s ease;
  pointer-events: none;
}

.weather-filter {
  position: absolute;
  inset: 0;
  transition: filter 2s ease;
  pointer-events: none;
}

.weather-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.stars-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: twinkle 2s ease-in-out infinite;
  box-shadow: 0 0 4px rgba(255,255,255,0.8);
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* 天气指示器 */
.weather-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 12px;
  font-size: 12px;
  color: #e0d5c1;
}

.weather-indicator .weather-icon {
  font-size: 16px;
}

.weather-indicator .game-time {
  font-family: monospace;
  color: #bf360c;
}

.weather-indicator .time-period {
  color: #b8a88a;
}


/* ===== 装备流光特效 ===== */
.equip-icon {
  position: relative;
  overflow: hidden;
}

/* 品质边框发光 */
.equip-quality-white { border-color: rgba(200,200,200,0.6); }
.equip-quality-green { 
  border-color: rgba(74,222,128,0.8);
  box-shadow: 0 0 8px rgba(74,222,128,0.4), inset 0 0 8px rgba(74,222,128,0.2);
}
.equip-quality-blue { 
  border-color: rgba(96,165,250,0.9);
  box-shadow: 0 0 10px rgba(96,165,250,0.5), inset 0 0 10px rgba(96,165,250,0.3);
}
.equip-quality-purple { 
  border-color: rgba(192,132,252,0.9);
  box-shadow: 0 0 12px rgba(192,132,252,0.6), inset 0 0 12px rgba(192,132,252,0.3);
}
.equip-quality-orange { 
  border-color: rgba(251,191,36,1);
  box-shadow: 0 0 15px rgba(251,191,36,0.7), inset 0 0 15px rgba(251,191,36,0.4);
  animation: orangePulse 2s ease-in-out infinite;
}
.equip-quality-red { 
  border-color: rgba(248,113,113,1);
  box-shadow: 0 0 18px rgba(248,113,113,0.8), inset 0 0 18px rgba(248,113,113,0.5);
  animation: redPulse 1.5s ease-in-out infinite;
}
.equip-quality-ancient { 
  border-color: rgba(251,146,60,1);
  box-shadow: 0 0 20px rgba(251,146,60,0.9), inset 0 0 20px rgba(251,146,60,0.5);
  animation: ancientGlow 2s ease-in-out infinite;
}
.equip-quality-myth { 
  border-color: rgba(236,72,153,1);
  box-shadow: 0 0 25px rgba(236,72,153,1), inset 0 0 25px rgba(236,72,153,0.6);
  animation: mythRainbow 3s linear infinite;
}

/* 流光扫过效果 */
.equip-icon::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,255,255,0.1) 50%,
    transparent 70%
  );
  transform: rotate(45deg);
  opacity: 0;
  pointer-events: none;
}

.equip-quality-blue::after,
.equip-quality-purple::after,
.equip-quality-orange::after,
.equip-quality-red::after,
.equip-quality-ancient::after,
.equip-quality-myth::after {
  animation: shineSweep 3s ease-in-out infinite;
}

.equip-quality-orange::after { animation-delay: 0.5s; }
.equip-quality-red::after { animation-delay: 1s; }
.equip-quality-ancient::after { animation-delay: 0.3s; }
.equip-quality-myth::after { animation-delay: 0.8s; }

@keyframes shineSweep {
  0% { transform: translateX(-100%) rotate(45deg); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(100%) rotate(45deg); opacity: 0; }
}

@keyframes orangePulse {
  0%, 100% { box-shadow: 0 0 15px rgba(251,191,36,0.7), inset 0 0 15px rgba(251,191,36,0.4); }
  50% { box-shadow: 0 0 25px rgba(251,191,36,1), inset 0 0 20px rgba(251,191,36,0.6); }
}

@keyframes redPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(248,113,113,0.8), inset 0 0 18px rgba(248,113,113,0.5); }
  50% { box-shadow: 0 0 30px rgba(248,113,113,1), inset 0 0 25px rgba(248,113,113,0.7); }
}

@keyframes ancientGlow {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(251,146,60,0.9), inset 0 0 20px rgba(251,146,60,0.5);
    border-color: rgba(251,146,60,1);
  }
  50% { 
    box-shadow: 0 0 35px rgba(251,146,60,1), inset 0 0 30px rgba(251,146,60,0.7);
    border-color: rgba(255,200,100,1);
  }
}

@keyframes mythRainbow {
  0% { 
    box-shadow: 0 0 25px rgba(236,72,153,1), inset 0 0 25px rgba(236,72,153,0.6);
    border-color: rgba(236,72,153,1);
  }
  33% { 
    box-shadow: 0 0 25px rgba(96,165,250,1), inset 0 0 25px rgba(96,165,250,0.6);
    border-color: rgba(96,165,250,1);
  }
  66% { 
    box-shadow: 0 0 25px rgba(74,222,128,1), inset 0 0 25px rgba(74,222,128,0.6);
    border-color: rgba(74,222,128,1);
  }
  100% { 
    box-shadow: 0 0 25px rgba(236,72,153,1), inset 0 0 25px rgba(236,72,153,0.6);
    border-color: rgba(236,72,153,1);
  }
}

/* 背包物品品质边框 */
.bag-item-icon {
  position: relative;
  overflow: hidden;
}

.bag-item-icon.equip-quality-green { border-color: rgba(74,222,128,0.8); box-shadow: 0 0 6px rgba(74,222,128,0.4); }
.bag-item-icon.equip-quality-blue { border-color: rgba(96,165,250,0.9); box-shadow: 0 0 8px rgba(96,165,250,0.5); }
.bag-item-icon.equip-quality-purple { border-color: rgba(192,132,252,0.9); box-shadow: 0 0 10px rgba(192,132,252,0.6); }
.bag-item-icon.equip-quality-orange { border-color: rgba(251,191,36,1); box-shadow: 0 0 12px rgba(251,191,36,0.7); animation: orangePulse 2s ease-in-out infinite; }
.bag-item-icon.equip-quality-red { border-color: rgba(248,113,113,1); box-shadow: 0 0 15px rgba(248,113,113,0.8); animation: redPulse 1.5s ease-in-out infinite; }
.bag-item-icon.equip-quality-ancient { border-color: rgba(251,146,60,1); box-shadow: 0 0 18px rgba(251,146,60,0.9); animation: ancientGlow 2s ease-in-out infinite; }
.bag-item-icon.equip-quality-myth { border-color: rgba(236,72,153,1); box-shadow: 0 0 20px rgba(236,72,153,1); animation: mythRainbow 3s linear infinite; }


/* ===== 江湖传闻系统 ===== */
.chat-message.rumor {
  padding: 8px 12px;
  margin: 4px 0;
  border-radius: 4px;
  border-left: 3px solid;
  animation: rumorSlideIn 0.5s ease;
}

.chat-message.rumor-system {
  background: rgba(255,215,0,0.08);
  border-left-color: #bf360c;
  color: #bf360c;
}

.chat-message.rumor-weather {
  background: rgba(135,206,235,0.08);
  border-left-color: #87ceeb;
  color: #87ceeb;
}

.chat-message.rumor-player {
  background: rgba(255,107,107,0.08);
  border-left-color: #ff6b6b;
  color: #ff6b6b;
}

.chat-message.rumor-world {
  background: rgba(192,132,252,0.08);
  border-left-color: #c084fc;
  color: #c084fc;
}

.chat-message.rumor-funny {
  background: rgba(74,222,128,0.08);
  border-left-color: #4ade80;
  color: #4ade80;
}

.chat-message.rumor .rumor-prefix {
  font-weight: bold;
  margin-right: 6px;
}

@keyframes rumorSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 传闻滚动公告（顶部） */
.rumor-banner {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(0,0,0,0.9), rgba(45,36,24,0.95), rgba(0,0,0,0.9));
  border: 1px solid rgba(212,175,55,0.6);
  border-radius: 20px;
  padding: 8px 24px;
  color: #bf360c;
  font-size: 13px;
  z-index: 100;
  animation: bannerSlideDown 0.5s ease, bannerFadeOut 0.5s ease 4.5s forwards;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  max-width: 80%;
  text-align: center;
}

@keyframes bannerSlideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes bannerFadeOut {
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
}


/* ===== 隐藏属性系统 ===== */
.hidden-stats-panel {
  margin-top: 15px;
  padding: 12px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 6px;
}

.hidden-stats-title {
  font-size: 13px;
  color: #bf360c;
  margin-bottom: 10px;
  letter-spacing: 2px;
  text-align: center;
}

.hidden-stat-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}

.hidden-stat-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.hidden-stat-info {
  flex: 1;
}

.hidden-stat-name {
  font-size: 12px;
  color: #e0d5c1;
  margin-bottom: 3px;
  display: flex;
  justify-content: space-between;
}

.hidden-stat-value {
  color: #bf360c;
  font-weight: bold;
}

.hidden-stat-bar {
  height: 6px;
  background: rgba(0,0,0,0.5);
  border-radius: 3px;
  overflow: hidden;
}

.hidden-stat-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.hidden-stat-fill.luck { background: linear-gradient(90deg, #22c55e, #4ade80); }
.hidden-stat-fill.fortune { background: linear-gradient(90deg, #eab308, #facc15); }
.hidden-stat-fill.mood { background: linear-gradient(90deg, #ec4899, #f472b6); }

.hidden-stat-desc {
  font-size: 10px;
  color: #8b7d6b;
  margin-top: 2px;
}

/* 心情状态显示 */
.mood-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  background: rgba(0,0,0,0.4);
}

.mood-state-badge.ecstatic { color: #bf360c; border: 1px solid rgba(255,215,0,0.5); }
.mood-state-badge.happy { color: #4ade80; border: 1px solid rgba(74,222,128,0.5); }
.mood-state-badge.normal { color: #94a3b8; border: 1px solid rgba(148,163,184,0.5); }
.mood-state-badge.sad { color: #60a5fa; border: 1px solid rgba(96,165,250,0.5); }
.mood-state-badge.depressed { color: #94a3b8; border: 1px solid rgba(148,163,184,0.3); }


/* ===== 境界突破CG ===== */
.breakthrough-cg {
  position: fixed;
  inset: 0;
  z-index: 9999;
  cursor: pointer;
  overflow: hidden;
  animation: cgFadeIn 0.3s ease;
}

.breakthrough-cg.fade-out {
  animation: cgFadeOut 0.5s ease forwards;
}

@keyframes cgFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cgFadeOut {
  to { opacity: 0; visibility: hidden; }
}

.cg-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, #1a1510 0%, #0a0805 100%);
}

.cg-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,0.9) 0%, rgba(255,180,0,0.5) 30%, transparent 70%);
  opacity: 0;
  transition: all 1s ease;
}

.cg-halo.active {
  opacity: 1;
  width: 800px;
  height: 800px;
  animation: haloPulse 2s ease-in-out infinite;
}

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

.cg-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cg-realm {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  transition: all 0.8s ease;
}

.cg-realm.show {
  opacity: 1;
  animation: realmZoomIn 0.8s ease;
}

@keyframes realmZoomIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
}

.cg-realm-sub {
  font-size: 18px;
  color: #b8a88a;
  letter-spacing: 8px;
  margin-bottom: 15px;
  text-shadow: 0 0 10px rgba(255,215,0,0.5);
}

.cg-realm-name {
  font-size: 72px;
  font-weight: bold;
  color: #bf360c;
  letter-spacing: 12px;
  text-shadow: 
    0 0 20px rgba(255,215,0,0.8),
    0 0 40px rgba(255,180,0,0.6),
    0 0 60px rgba(255,150,0,0.4);
  margin-bottom: 20px;
}

.cg-realm-line {
  width: 300px;
  height: 2px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, #bf360c, transparent);
}

.cg-stats {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 30px;
  opacity: 0;
  transition: all 0.5s ease;
}

.cg-stats.show {
  opacity: 1;
  animation: statsSlideUp 0.5s ease;
}

@keyframes statsSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.cg-stat-item {
  font-size: 20px;
  color: #4ade80;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(74,222,128,0.6);
  animation: statFloat 1s ease infinite alternate;
}

@keyframes statFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-5px); }
}

.cg-skip {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 2px;
  animation: skipBlink 1.5s ease-in-out infinite;
}

@keyframes skipBlink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* 屏幕震动 */
.breakthrough-cg.shake {
  animation: screenShake 0.3s ease;
}

@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 5px); }
  40% { transform: translate(5px, -5px); }
  60% { transform: translate(-3px, -3px); }
  80% { transform: translate(3px, 3px); }
}


/* 副本难度标签 */
.dungeon-difficulty {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  font-size: 11px;
  border: 1px solid currentColor;
  border-radius: 10px;
  vertical-align: middle;
}

/* BOSS名称样式 */
.dungeon-boss-name {
  color: #ff6b6b;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(255,107,107,0.5);
}


/* ===== 装备附魔系统 ===== */
.enchant-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.enchant-modal {
  background: linear-gradient(135deg, #2d2418 0%, #1a1510 100%);
  border: 2px solid #c9a96e;
  border-radius: 12px;
  width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 0 30px rgba(201,169,110,0.3);
}

.enchant-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(201,169,110,0.3);
}

.enchant-header h2 {
  margin: 0;
  color: #bf360c;
  font-size: 20px;
}

.enchant-close {
  background: none;
  border: none;
  color: #00838f;
  font-size: 20px;
  cursor: pointer;
}

.enchant-body {
  padding: 20px;
}

.enchant-equipment {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: rgba(201,169,110,0.1);
  border-radius: 8px;
  margin-bottom: 20px;
}

.enchant-equip-icon {
  font-size: 40px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,215,0,0.1);
  border-radius: 8px;
}

.enchant-equip-name {
  color: #bf360c;
  font-size: 18px;
  font-weight: bold;
}

.enchant-equip-level {
  color: #b8a88a;
  font-size: 14px;
}

.enchant-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.enchant-type-card {
  padding: 12px;
  background: rgba(255,255,255,0.05);
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s;
}

.enchant-type-card:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

.enchant-type-card.selected {
  background: rgba(255,215,0,0.1);
  box-shadow: 0 0 15px rgba(255,215,0,0.3);
}

.enchant-type-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.enchant-type-name {
  color: #e0d5c1;
  font-size: 14px;
  margin-bottom: 3px;
}

.enchant-type-level {
  color: #b8a88a;
  font-size: 12px;
}

.enchant-type-value {
  font-size: 16px;
  font-weight: bold;
  margin-top: 3px;
}

.enchant-detail {
  padding: 15px;
  background: rgba(201,169,110,0.1);
  border-radius: 8px;
}

.enchant-detail-title {
  color: #bf360c;
  font-size: 16px;
  margin-bottom: 10px;
}

.enchant-detail-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 15px;
  font-size: 18px;
}

.enchant-detail-stats > div:first-child {
  color: #b8a88a;
}

.enchant-arrow {
  color: #bf360c;
  font-size: 24px;
}

.enchant-next-value {
  color: #4ade80;
  font-weight: bold;
}

.enchant-detail-cost {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 15px;
  color: #e0d5c1;
}

.enchant-success-rate {
  text-align: center;
  color: #bf360c;
  margin-bottom: 8px;
}

.enchant-progress {
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 15px;
}

.enchant-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4ade80, #bf360c);
  transition: width 0.3s;
}

.enchant-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #00838f 0%, #a08050 100%);
  border: none;
  border-radius: 8px;
  color: #1a1510;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.enchant-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(201,169,110,0.4);
}

.enchant-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.enchant-btn.enchanting {
  animation: enchantPulse 1s infinite;
}

@keyframes enchantPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.enchant-result {
  margin-top: 15px;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
}

.enchant-result.success {
  background: rgba(74,222,128,0.2);
  color: #4ade80;
}

.enchant-result.fail {
  background: rgba(248,113,113,0.2);
  color: #f87171;
}


/* ===== 称号系统 ===== */
.title-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.title-modal {
  background: linear-gradient(135deg, #2d2418 0%, #1a1510 100%);
  border: 2px solid #c9a96e;
  border-radius: 12px;
  width: 700px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 0 30px rgba(201,169,110,0.3);
}

.title-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(201,169,110,0.3);
}

.title-header h2 {
  margin: 0;
  color: #e8b64c;
  font-size: 20px;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.title-close {
  background: none;
  border: none;
  color: #c9a96e;
  font-size: 20px;
  cursor: pointer;
}
.title-close:hover { color: #e8b64c; }

.title-stats {
  display: flex;
  gap: 30px;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(201,169,110,0.2);
}

.title-stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.title-stat-label {
  color: #b8a88a;
  font-size: 12px;
}

.title-stat-value {
  color: #e8b64c;
  font-size: 18px;
  font-weight: bold;
}

.title-filters {
  display: flex;
  gap: 8px;
  padding: 15px 20px;
  flex-wrap: wrap;
}
.title-realm-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 20px 0;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(201,169,110,.16), rgba(201,169,110,.05));
  border: 1px solid rgba(201,169,110,.4);
  border-radius: 8px;
}
.title-realm-label {
  font-size: 12px;
  color: #b8a88a;
  white-space: nowrap;
}
.title-realm-name {
  font-size: 15px;
  font-weight: bold;
  padding: 1px 8px;
  border: 1px solid;
  border-radius: 6px;
  white-space: nowrap;
}
.title-realm-desc {
  font-size: 12px;
  color: #e0d5c1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title-card-progress {
  margin-bottom: 8px;
}
.title-card-progress-text {
  font-size: 11px;
  color: #d8c9a8;
  margin-bottom: 3px;
}
.title-card-progress-bar {
  height: 5px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  overflow: hidden;
}
.title-card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #e8b64c, #c9a96e);
  border-radius: 3px;
  transition: width .3s;
}

.title-filter-btn {
  padding: 6px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(201,169,110,0.3);
  border-radius: 15px;
  color: #b8a88a;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.3s;
}

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

.title-filter-btn.active {
  background: rgba(232,182,76,0.22);
  border-color: #e8b64c;
  color: #e8b64c;
  font-weight: 600;
}

.title-list {
  padding: 0 20px 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.title-card {
  padding: 12px;
  border: 2px solid;
  border-radius: 8px;
  transition: all 0.3s;
}

.title-card.locked {
  opacity: 0.66;
  filter: grayscale(0.55);
}

.title-card.equipped {
  box-shadow: 0 0 15px rgba(255,215,0,0.4);
}

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

.title-card-name {
  font-size: 16px;
  font-weight: bold;
}

.title-card-quality {
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 8px;
}

.title-card-desc {
  color: #e0d5c1;
  font-size: 13px;
  margin-bottom: 6px;
}

.title-card-requirement {
  color: #b8a88a;
  font-size: 12px;
  margin-bottom: 8px;
}

.title-card-bonus {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.title-bonus-item {
  color: #4ade80;
  font-size: 12px;
  background: rgba(74,222,128,0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.title-card-btn {
  width: 100%;
  padding: 8px;
  background: linear-gradient(135deg, #c9a96e 0%, #8a6d2f 100%);
  border: none;
  border-radius: 6px;
  color: #1a1510;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}
.title-card-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 10px rgba(201,169,110,.35); }

.title-card-btn:hover {
  transform: translateY(-1px);
}

.title-card-btn.equipped {
  background: linear-gradient(135deg, #5a9e6f 0%, #2f7d4e 100%);
  color: #fff;
  cursor: default;
}
.title-card-btn.equipped:hover { box-shadow: none; transform: none; }

/* 角色名上方称号显示 */
.character-title-display {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 4px;
}


/* ===== 好友互动系统 ===== */
.friend-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(201,169,110,0.2);
  border-radius: 8px;
  margin-bottom: 8px;
  transition: all 0.3s;
}

.friend-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(201,169,110,0.4);
}

.friend-avatar {
  position: relative;
  width: 48px;
  height: 48px;
}

.friend-avatar-img {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: rgba(201,169,110,0.15);
  border-radius: 50%;
}

.friend-status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #2d2418;
}

.friend-info {
  flex: 1;
}

.friend-name {
  color: #bf360c;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

.friend-intimacy {
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 8px;
}

.friend-detail {
  color: #b8a88a;
  font-size: 12px;
  margin-top: 3px;
  display: flex;
  gap: 10px;
}

.friend-status {
  font-weight: bold;
}

.friend-intimacy-bar {
  width: 120px;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  margin-top: 5px;
  overflow: hidden;
}

.friend-intimacy-fill {
  height: 100%;
  transition: width 0.3s;
}

.friend-actions {
  display: flex;
  gap: 6px;
}

.friend-action-group {
  display: flex;
  gap: 4px;
}

.friend-action-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201,169,110,0.15);
  border: 1px solid rgba(201,169,110,0.3);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.friend-action-btn:hover {
  background: rgba(201,169,110,0.3);
  transform: scale(1.1);
}

.friend-action-btn.add {
  width: auto;
  padding: 0 12px;
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: #1a1510;
  font-weight: bold;
}

.friend-action-btn.remove {
  background: rgba(239,68,68,0.2);
}

.friend-action-btn.blessed {
  background: rgba(74,222,128,0.3);
}

/* 好友私聊 */
.friend-chat {
  display: flex;
  flex-direction: column;
  height: 400px;
}

.friend-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid rgba(201,169,110,0.2);
  color: #bf360c;
  font-weight: bold;
}

.friend-chat-back {
  background: none;
  border: 1px solid rgba(201,169,110,0.3);
  color: #b8a88a;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.friend-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
}

.chat-msg {
  margin-bottom: 12px;
  max-width: 70%;
}

.chat-msg.me {
  margin-left: auto;
}

.chat-msg-content {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
}

.chat-msg.me .chat-msg-content {
  background: linear-gradient(135deg, #00838f, #a08050);
  color: #1a1510;
}

.chat-msg.friend .chat-msg-content {
  background: rgba(255,255,255,0.1);
  color: #e0d5c1;
}

.chat-msg-time {
  font-size: 10px;
  color: #6b5d4f;
  margin-top: 3px;
}

.chat-msg.me .chat-msg-time {
  text-align: right;
}

.friend-chat-input {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(201,169,110,0.2);
}

.friend-chat-input input {
  flex: 1;
  padding: 8px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(201,169,110,0.3);
  border-radius: 6px;
  color: #e0d5c1;
}

.friend-chat-input button {
  padding: 8px 16px;
  background: linear-gradient(135deg, #00838f, #a08050);
  border: none;
  border-radius: 6px;
  color: #1a1510;
  font-weight: bold;
  cursor: pointer;
}

/* 切磋结果 */
.friend-duel-result {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #2d2418, #1a1510);
  border: 2px solid #c9a96e;
  border-radius: 12px;
  padding: 25px 35px;
  text-align: center;
  z-index: 100;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.friend-duel-result.win {
  border-color: #4ade80;
}

.friend-duel-result.lose {
  border-color: #f87171;
}

.duel-reward {
  margin-top: 10px;
  color: #4ade80;
  font-size: 14px;
}

.duel-close {
  margin-top: 15px;
  padding: 8px 24px;
  background: linear-gradient(135deg, #00838f, #a08050);
  border: none;
  border-radius: 6px;
  color: #1a1510;
  font-weight: bold;
  cursor: pointer;
}


/* ===== 坐骑系统 ===== */
.mount-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(201,169,110,0.2);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.mount-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(201,169,110,0.4);
}

.mount-card.equipped {
  border-color: #bf360c;
  background: rgba(255,215,0,0.1);
}

.mount-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: rgba(201,169,110,0.1);
  border: 2px solid;
  border-radius: 8px;
}

.mount-info {
  flex: 1;
}

.mount-name {
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mount-level {
  font-size: 11px;
  color: #bf360c;
  background: rgba(255,215,0,0.1);
  padding: 1px 6px;
  border-radius: 4px;
}

.mount-quality {
  font-size: 12px;
  margin-top: 2px;
}

.mount-stats {
  font-size: 11px;
  color: #b8a88a;
  margin-top: 4px;
}

.mount-actions {
  display: flex;
  gap: 6px;
}

.mount-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  transition: all 0.2s;
}

.mount-btn:hover {
  transform: scale(1.05);
}

.mount-btn.buy-btn {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: #1a1510;
}

.mount-btn.equip-btn {
  background: linear-gradient(135deg, #00838f, #a08050);
  color: #1a1510;
}

.mount-btn.equipped-btn {
  background: rgba(255,215,0,0.2);
  color: #bf360c;
  cursor: default;
}

.mount-detail {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #2d2418, #1a1510);
  border: 2px solid #c9a96e;
  border-radius: 12px;
  padding: 25px;
  z-index: 100;
  min-width: 350px;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.mount-detail-icon {
  font-size: 64px;
  text-align: center;
  margin-bottom: 15px;
}

.mount-detail-info h3 {
  text-align: center;
  margin: 0 0 10px 0;
}

.mount-desc {
  color: #b8a88a;
  font-size: 13px;
  text-align: center;
  margin: 10px 0;
}

.mount-detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 15px 0;
}

.mount-detail-stats > div {
  background: rgba(255,255,255,0.05);
  padding: 8px;
  border-radius: 4px;
  color: #e0d5c1;
  font-size: 13px;
}

.mount-price {
  text-align: center;
  color: #bf360c;
  font-weight: bold;
  margin: 10px 0;
}

.mount-detail-close {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #00838f, #a08050);
  border: none;
  border-radius: 6px;
  color: #1a1510;
  font-weight: bold;
  cursor: pointer;
  margin-top: 10px;
}


/* ===== 宠物系统 ===== */
.pet-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(201,169,110,0.2); border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: all 0.3s; }
.pet-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(201,169,110,0.4); }
.pet-card.equipped { border-color: #bf360c; background: rgba(255,215,0,0.1); }
.pet-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 32px; background: rgba(201,169,110,0.1); border: 2px solid; border-radius: 8px; }
.pet-info { flex: 1; }
.pet-name { font-size: 15px; font-weight: bold; display: flex; align-items: center; gap: 8px; }
.pet-level { font-size: 11px; color: #bf360c; background: rgba(255,215,0,0.1); padding: 1px 6px; border-radius: 4px; }
.pet-quality { font-size: 12px; margin-top: 2px; }
.pet-stats { font-size: 11px; color: #b8a88a; margin-top: 4px; }
.pet-actions { display: flex; gap: 6px; }
.pet-btn { padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: bold; transition: all 0.2s; }
.pet-btn:hover { transform: scale(1.05); }
.pet-btn.buy-btn { background: linear-gradient(135deg, #4ade80, #22c55e); color: #1a1510; }
.pet-btn.equip-btn { background: linear-gradient(135deg, #00838f, #a08050); color: #1a1510; }
.pet-btn.equipped-btn { background: rgba(255,215,0,0.2); color: #bf360c; cursor: default; }
.pet-detail { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(135deg, #2d2418, #1a1510); border: 2px solid #c9a96e; border-radius: 12px; padding: 25px; z-index: 100; min-width: 350px; box-shadow: 0 0 30px rgba(0,0,0,0.5); }
.pet-detail-icon { font-size: 64px; text-align: center; margin-bottom: 15px; }
.pet-detail-info h3 { text-align: center; margin: 0 0 10px 0; }
.pet-desc { color: #b8a88a; font-size: 13px; text-align: center; margin: 10px 0; }
.pet-detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 15px 0; }
.pet-detail-stats > div { background: rgba(255,255,255,0.05); padding: 8px; border-radius: 4px; color: #e0d5c1; font-size: 13px; }
.pet-price { text-align: center; color: #bf360c; font-weight: bold; margin: 10px 0; }
.pet-detail-close { width: 100%; padding: 10px; background: linear-gradient(135deg, #00838f, #a08050); border: none; border-radius: 6px; color: #1a1510; font-weight: bold; cursor: pointer; margin-top: 10px; }
.pet-modal-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; }
.pet-modal { background: linear-gradient(135deg, #2d2418, #1a1510); border: 2px solid #c9a96e; border-radius: 12px; width: 600px; max-height: 80vh; overflow: hidden; position: relative; }
.pet-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid rgba(201,169,110,0.2); }
.pet-header h2 { margin: 0; color: #bf360c; }
.pet-close { background: none; border: none; color: #b8a88a; font-size: 20px; cursor: pointer; }
.pet-tabs { display: flex; gap: 10px; padding: 10px 20px; border-bottom: 1px solid rgba(201,169,110,0.2); }
.pet-tab { padding: 8px 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(201,169,110,0.2); border-radius: 6px; color: #b8a88a; cursor: pointer; }
.pet-tab.active { background: rgba(201,169,110,0.2); border-color: #c9a96e; color: #bf360c; }
.pet-body { padding: 15px 20px; max-height: 500px; overflow-y: auto; }
.pet-list { display: flex; flex-direction: column; gap: 8px; }
.pet-empty { text-align: center; color: #6b5d4f; padding: 40px; }


/* ===== 结婚系统 ===== */
.marriage-modal-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; }
.marriage-modal { background: linear-gradient(135deg, #2d2418, #1a1510); border: 2px solid #ff6b9d; border-radius: 12px; width: 550px; max-height: 80vh; overflow: hidden; }
.marriage-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid rgba(255,107,157,0.3); }
.marriage-header h2 { margin: 0; color: #ff6b9d; }
.marriage-close { background: none; border: none; color: #b8a88a; font-size: 20px; cursor: pointer; }
.marriage-body { padding: 20px; max-height: 500px; overflow-y: auto; }
.marriage-tip { color: #b8a88a; font-size: 13px; margin-bottom: 15px; text-align: center; }
.marriage-candidates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.candidate-card { padding: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,107,157,0.2); border-radius: 8px; text-align: center; cursor: pointer; transition: all 0.3s; }
.candidate-card:hover { background: rgba(255,107,157,0.1); border-color: rgba(255,107,157,0.5); }
.candidate-card.selected { border-color: #ff6b9d; background: rgba(255,107,157,0.15); }
.candidate-avatar { font-size: 32px; margin-bottom: 8px; }
.candidate-name { color: #ff6b9d; font-weight: bold; font-size: 14px; }
.candidate-detail { color: #b8a88a; font-size: 11px; margin-top: 4px; }
.marriage-selected { margin-top: 15px; padding: 15px; background: rgba(255,107,157,0.1); border-radius: 8px; text-align: center; }
.marriage-selected p { color: #b8a88a; font-size: 13px; margin: 0 0 10px 0; }
.marry-btn { padding: 10px 30px; background: linear-gradient(135deg, #ff6b9d, #ff4081); border: none; border-radius: 6px; color: white; font-weight: bold; cursor: pointer; font-size: 15px; }
.marry-btn:hover { transform: scale(1.05); }
.marriage-spouse { display: flex; gap: 20px; align-items: flex-start; }
.spouse-avatar { font-size: 64px; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; background: rgba(255,107,157,0.1); border: 2px solid #ff6b9d; border-radius: 50%; }
.spouse-info { flex: 1; }
.spouse-info h3 { margin: 0 0 5px 0; }
.spouse-info p { color: #b8a88a; font-size: 13px; margin: 5px 0; }
.spouse-desc { font-style: italic; }
.marriage-buffs { display: flex; gap: 10px; margin: 15px 0; flex-wrap: wrap; }
.marriage-buffs > div { color: #bf360c; font-weight: bold; width: 100%; }
.marriage-buffs span { background: rgba(255,215,0,0.1); padding: 4px 10px; border-radius: 4px; color: #bf360c; font-size: 12px; }
.divorce-btn { padding: 8px 20px; background: rgba(239,68,68,0.2); border: 1px solid #ef4444; border-radius: 6px; color: #ef4444; cursor: pointer; margin-top: 10px; }


/* ===== 帮派战 ===== */
.sectwar-modal-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; }
.sectwar-modal { background: linear-gradient(135deg, #2d2418, #1a1510); border: 2px solid #ef4444; border-radius: 12px; width: 500px; overflow: hidden; }
.sectwar-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid rgba(239,68,68,0.3); }
.sectwar-header h2 { margin: 0; color: #ef4444; }
.sectwar-close { background: none; border: none; color: #b8a88a; font-size: 20px; cursor: pointer; }
.sectwar-body { padding: 20px; }
.sectwar-tip { color: #e0d5c1; font-size: 14px; text-align: center; margin-bottom: 15px; }
.sectwar-rules { background: rgba(239,68,68,0.1); padding: 15px; border-radius: 8px; margin-bottom: 15px; }
.sectwar-rules h3 { color: #ef4444; margin: 0 0 10px 0; }
.sectwar-rules p { color: #b8a88a; font-size: 13px; margin: 5px 0; }
.sectwar-join-btn { width: 100%; padding: 12px; background: linear-gradient(135deg, #ef4444, #dc2626); border: none; border-radius: 6px; color: white; font-weight: bold; cursor: pointer; font-size: 15px; }
.sectwar-join-btn:hover { transform: scale(1.02); }

/* ===== AI智能NPC对话 ===== */
.aichat-modal-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; }
.aichat-modal { background: linear-gradient(135deg, #2d2418, #1a1510); border: 2px solid #8b5cf6; border-radius: 12px; width: 450px; height: 500px; display: flex; flex-direction: column; overflow: hidden; }
.aichat-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid rgba(139,92,246,0.3); }
.aichat-header h2 { margin: 0; color: #8b5cf6; font-size: 16px; }
.aichat-close { background: none; border: none; color: #b8a88a; font-size: 20px; cursor: pointer; }
.aichat-messages { flex: 1; overflow-y: auto; padding: 15px; }
.aichat-empty { text-align: center; color: #6b5d4f; padding: 40px; }
.aichat-msg { margin-bottom: 12px; max-width: 80%; }
.aichat-msg.me { margin-left: auto; }
.aichat-msg-content { padding: 8px 12px; border-radius: 10px; font-size: 14px; }
.aichat-msg.me .aichat-msg-content { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: white; }
.aichat-msg.ai .aichat-msg-content { background: rgba(255,255,255,0.1); color: #e0d5c1; }
.aichat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(139,92,246,0.2); }
.aichat-input input { flex: 1; padding: 8px 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(139,92,246,0.3); border-radius: 6px; color: #e0d5c1; }
.aichat-input button { padding: 8px 16px; background: linear-gradient(135deg, #8b5cf6, #7c3aed); border: none; border-radius: 6px; color: white; font-weight: bold; cursor: pointer; }


/* ===== 坐骑弹窗基础样式 ===== */
.mount-modal-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; }
.mount-modal { background: linear-gradient(135deg, #2d2418, #1a1510); border: 2px solid #c9a96e; border-radius: 12px; width: 600px; max-height: 80vh; overflow: hidden; position: relative; }
.mount-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid rgba(201,169,110,0.2); }
.mount-header h2 { margin: 0; color: #bf360c; }
.mount-close { background: none; border: none; color: #b8a88a; font-size: 20px; cursor: pointer; }
.mount-tabs { display: flex; gap: 10px; padding: 10px 20px; border-bottom: 1px solid rgba(201,169,110,0.2); }
.mount-tab { padding: 8px 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(201,169,110,0.2); border-radius: 6px; color: #b8a88a; cursor: pointer; }
.mount-tab.active { background: rgba(201,169,110,0.2); border-color: #c9a96e; color: #bf360c; }
.mount-body { padding: 15px 20px; max-height: 500px; overflow-y: auto; }
.mount-list { display: flex; flex-direction: column; gap: 8px; }
.mount-empty { text-align: center; color: #6b5d4f; padding: 40px; }


/* ===== 右下角悬浮按钮组 ===== */
.floating-buttons {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.floating-main-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00838f, #a08050);
  border: 2px solid #bf360c;
  color: #1a1510;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-main-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(201,169,110,0.5);
}

.floating-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.floating-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2d2418, #1a1510);
  border: 2px solid #c9a96e;
  color: #bf360c;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInUp 0.3s ease-out backwards;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.floating-btn:hover {
  background: linear-gradient(135deg, #00838f, #a08050);
  color: #1a1510;
  transform: scale(1.1);
}

.floating-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}



/* ===== 顶部状态栏（紧凑横向布局） ===== */
.compact-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  gap: 12px;
  min-height: 56px;
}

.topbar-left-compact {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.topbar-info-compact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.topbar-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-row1 .char-name {
  font-size: 15px;
  font-weight: bold;
  color: #bf360c;
  text-shadow: 0 0 5px rgba(255,215,0,0.5);
}

.topbar-row1 .char-level {
  font-size: 11px;
  color: #00838f;
  background: rgba(0,0,0,0.3);
  padding: 1px 5px;
  border-radius: 3px;
}

.topbar-row1 .char-sect {
  font-size: 11px;
  color: #a09080;
}

.topbar-row1 .char-cultivation {
  font-size: 11px;
  color: #87ceeb;
}

/* 状态条横向排列 */
.topbar-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mini-status {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.mini-icon {
  font-size: 11px;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.mini-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(0,0,0,0.5);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(201,169,110,0.3);
  min-width: 40px;
}

.mini-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.mini-bar-fill.hp-fill {
  background: linear-gradient(90deg, #dc2626, #ef4444, #f87171);
  box-shadow: 0 0 6px rgba(239,68,68,0.5);
}

.mini-bar-fill.mp-fill {
  background: linear-gradient(90deg, #1d4ed8, #3b82f6, #60a5fa);
  box-shadow: 0 0 6px rgba(59,130,246,0.5);
}

.mini-bar-fill.exp-fill {
  background: linear-gradient(90deg, #b45309, #f59e0b, #fbbf24);
  box-shadow: 0 0 6px rgba(245,158,11,0.5);
}

.mini-text {
  font-size: 10px;
  color: #e0d5c1;
  min-width: 45px;
  text-align: right;
  flex-shrink: 0;
}

.hp-low .mini-bar-fill.hp-fill {
  animation: hpPulse 1s infinite;
}

@keyframes hpPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* 中间区域 */
.topbar-center-compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.topbar-center-compact .topbar-currencies {
  display: flex;
  gap: 10px;
}

.topbar-center-compact .top-currency {
  font-size: 12px;
  color: #e0d5c1;
}

.topbar-center-compact .weather-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #a09080;
}

/* 右侧按钮 */
.compact-topbar .game-top-actions {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}


/* ===== 左侧栏人物货币显示 ===== */
.char-portrait-currencies {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  border: 1px solid rgba(201,169,110,0.2);
}

.portrait-currency {
  font-size: 12px;
  color: #e0d5c1;
  display: flex;
  align-items: center;
  gap: 2px;
}

.portrait-currency.gold {
  color: #fbbf24;
}

.portrait-currency.ingot {
  color: #f87171;
}

.portrait-currency.spiritStone {
  color: #60a5fa;
}

/* ===== 钱币图标（20261019 统一透明底素材） ===== */
.currency-icon {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  object-fit: contain;
}
.pi-currency-icon {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  object-fit: contain;
}
.mail-reward-icon {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 4px;
  object-fit: contain;
}
.currency-icon-img {
  width: 22px;
  height: 22px;
  vertical-align: -4px;
  object-fit: contain;
}
.price-coin-img {
  width: 17px;
  height: 17px;
  vertical-align: -3px;
  object-fit: contain;
}
.reward-coin-img {
  width: 19px;
  height: 19px;
  vertical-align: -4px;
  object-fit: contain;
}


/* ===== 通用弹窗动画系统 ===== */
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

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

@keyframes goldGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
  50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
}

/* 所有弹窗遮罩淡入动画 */
[class*="-modal-overlay"] {
  animation: modalFadeIn 0.3s ease-out;
}

/* 所有弹窗内容缩放进入动画 */
[class*="-modal-content"],
[class*="-modal"]:not([class*="-overlay"]):not([class*="-header"]):not([class*="-body"]):not([class*="-footer"]) {
  animation: modalScaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 弹窗标题金色发光 */
[class*="-modal-header"] h2,
[class*="-modal-header"] h3 {
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  letter-spacing: 2px;
}

/* ===== 聊天消息气泡古风优化 ===== */
.chat-msg {
  position: relative;
  transition: all 0.2s ease;
}

.chat-msg:hover {
  transform: translateX(4px);
}

.chat-msg-avatar {
  border: 2px solid var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(212, 168, 83, 0.4);
  overflow: hidden;
}

.chat-msg-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.chat-msg-sender {
  color: var(--vermilion);
  font-weight: bold;
  font-family: var(--font-title);
  font-size: 14px;
}

.chat-msg-level {
  font-size: 11px;
  color: var(--gold);
  background: rgba(212, 168, 83, 0.15);
  padding: 1px 6px;
  border-radius: 3px;
}

.chat-msg-time {
  font-size: 11px;
  color: rgba(139, 115, 85, 0.6);
  margin-left: auto;
}

.chat-msg-body {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 240, 230, 0.9));
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid var(--gold);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  color: #5a4a3a;
  line-height: 1.6;
  font-size: 14px;
}

.chat-msg:hover .chat-msg-body {
  border-left-color: var(--vermilion);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

/* 自己的消息靠右 */
.chat-msg.self {
  flex-direction: row-reverse;
}

.chat-msg.self .chat-msg-body {
  border-left: none;
  border-right: 3px solid var(--vermilion);
  background: linear-gradient(135deg, rgba(200, 55, 45, 0.08), rgba(255, 255, 255, 0.95));
}

/* 系统消息特殊样式 */
.chat-msg.system .chat-msg-bubble {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(255, 215, 0, 0.05));
  border: 1px dashed rgba(255, 215, 0, 0.4);
  border-radius: 6px;
  padding: 8px 12px;
  color: #455a64;
  font-style: italic;
  text-align: center;
  font-size: 13px;
}

/* ===== 装备/物品品质光晕 ===== */
@keyframes qualityGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}

.equip-slot[data-quality="legendary"],
.bag-slot[data-quality="legendary"] {
  animation: qualityGlow 2s ease-in-out infinite;
}

.equip-slot[data-quality="epic"] {
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.5), inset 0 0 4px rgba(168, 85, 247, 0.2);
}

.equip-slot[data-quality="rare"] {
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.4), inset 0 0 3px rgba(59, 130, 246, 0.2);
}

.equip-slot[data-quality="uncommon"] {
  box-shadow: 0 0 5px rgba(34, 197, 94, 0.4), inset 0 0 3px rgba(34, 197, 94, 0.2);
}


/* ===== 阶段3：特效与动画系统 ===== */

/* 1. 按钮点击波纹效果 */
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 215, 0, 0.4);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

/* 所有可点击按钮添加波纹容器 */
.top-btn,
.chat-quick-slot,
.sidebar-tab,
.bag-slot,
.equip-slot,
.modal-btn {
  position: relative;
  overflow: hidden;
}

/* 2. 物品获得飘字动画 */
@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1.1);
  }
  80% {
    opacity: 1;
    transform: translateY(-30px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-60px) scale(0.9);
  }
}

.float-text {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-weight: bold;
  font-size: 18px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
  animation: floatUp 1.5s ease-out forwards;
  white-space: nowrap;
}

.float-text.gold {
  color: #bf360c;
}

.float-text.red {
  color: #ff4444;
}

.float-text.green {
  color: #44ff44;
}

.float-text.blue {
  color: #44aaff;
}

.float-text.purple {
  color: #cc44ff;
}

/* 3. 技能释放光影特效 */
@keyframes skillFlash {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  30% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

@keyframes skillShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.skill-flash {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, rgba(255, 100, 0, 0.3) 50%, transparent 70%);
  pointer-events: none;
  z-index: 9998;
  animation: skillFlash 0.8s ease-out forwards;
}

.skill-shake {
  animation: skillShake 0.4s ease-in-out;
}

/* 4. 伤害数字飘字 */
@keyframes damageFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translateY(-20px) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translateY(-80px) scale(1);
  }
}

.damage-number {
  position: absolute;
  font-size: 24px;
  font-weight: bold;
  pointer-events: none;
  z-index: 100;
  animation: damageFloat 1s ease-out forwards;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

.damage-number.crit {
  font-size: 32px;
  color: #ff4444;
  text-shadow: 0 0 15px rgba(255, 68, 68, 0.8);
}

.damage-number.normal {
  color: #ffaa00;
}

.damage-number.heal {
  color: #44ff44;
}

.damage-number.miss {
  color: #aaaaaa;
  font-size: 18px;
}

/* 5. 全局光影粒子 */
@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-100vh) translateX(50px);
    opacity: 0;
  }
}

.light-particle {
  position: fixed;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.8), transparent);
  pointer-events: none;
  z-index: 1;
  animation: particleFloat linear infinite;
}

/* 6. 按钮按下效果 */
.top-btn:active,
.chat-quick-slot:active,
.sidebar-tab:active,
.bag-slot:active,
.equip-slot:active,
.modal-btn:active {
  transform: scale(0.95) !important;
  transition: transform 0.1s ease;
}

/* 7. 发光脉冲效果（重要按钮） */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 100, 0, 0.4);
  }
}

.glow-pulse {
  animation: glowPulse 2s ease-in-out infinite;
}

/* 8. 边框流光效果 */
@keyframes borderFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.border-flow {
  position: relative;
  background: linear-gradient(90deg, #bf360c, #ff6b00, #bf360c, #ff6b00);
  background-size: 300% 100%;
  animation: borderFlow 3s ease infinite;
  padding: 2px;
  border-radius: 8px;
}

.border-flow > * {
  background: #1a1510;
  border-radius: 6px;
}

/* 9. 淡入淡出过渡 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

.fade-out {
  animation: fadeOut 0.3s ease-in forwards;
}

/* 10. 缩放进入 */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scale-in {
  animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 11. 滑入效果 */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

.slide-in-left {
  animation: slideInLeft 0.4s ease-out;
}

.slide-in-right {
  animation: slideInRight 0.4s ease-out;
}

.slide-in-up {
  animation: slideInUp 0.4s ease-out;
}

/* 12. 旋转加载 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

/* 13. 呼吸效果 */
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

.breathe {
  animation: breathe 3s ease-in-out infinite;
}

/* 14. 闪烁效果 */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.blink {
  animation: blink 1s ease-in-out infinite;
}

/* 15. 文字渐变发光 */
@keyframes textGlow {
  0%, 100% {
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 100, 0, 0.4);
  }
}

.text-glow {
  animation: textGlow 2s ease-in-out infinite;
}


/* ===== 场景化弹窗背景图 ===== */

/* 商店弹窗 - 古代商铺 */



/* 锻造弹窗 - 铁匠铺 */



/* 战斗弹窗 - 江湖对决 */
.battle-modal .modal-content {
  background-image: url('../assets/img/modal-bg/battle-scene.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.battle-modal .modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 100%);
  z-index: 0;
}

.battle-modal .modal-content > * {
  position: relative;
  z-index: 1;
}

/* 物品弹窗 - 古卷宝物 */
.item-modal .modal-content {
  background-image: url('../assets/img/modal-bg/item-scene.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.item-modal .modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%);
  z-index: 0;
}

.item-modal .modal-content > * {
  position: relative;
  z-index: 1;
}

/* 技能弹窗 - 武功秘籍阁 */
.skill-modal .modal-content {
  background-image: url('../assets/img/modal-bg/skill-scene.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.skill-modal .modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
  z-index: 0;
}

.skill-modal .modal-content > * {
  position: relative;
  z-index: 1;
}

/* 场景化弹窗文字优化 */
.shop-modal .modal-title,
.forge-modal .modal-title,
.battle-modal .modal-title,
.item-modal .modal-title,
.skill-modal .modal-title {
  color: #bf360c !important;
  text-shadow: 0 0 10px rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.6) !important;
}

.shop-modal .modal-body,
.forge-modal .modal-body,
.battle-modal .modal-body,
.item-modal .modal-body,
.skill-modal .modal-body {
  color: #f5f0e6 !important;
}


/* ===== 商城弹窗全新三栏布局样式 ===== */
.shop-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.shop-modal {
    width: 1100px;
    max-width: 95vw;
    height: 720px;
    max-height: 92vh;
    background: linear-gradient(180deg, #2d1f0f 0%, #1a1208 100%);
    border: 3px solid #b8860b;
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(184,134,11,0.4), inset 0 0 60px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 商城背景图 */
.shop-modal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('../assets/img/modal-bg/shop-scene.png');
    background-size: cover;
    background-position: center;
    opacity: 0.25;
    z-index: 0;
}

.shop-modal > * {
    position: relative;
    z-index: 1;
}

/* 顶部标题栏 */
.shop-header {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: linear-gradient(180deg, rgba(184,134,11,0.3), rgba(184,134,11,0.1));
    border-bottom: 2px solid #b8860b;
    gap: 20px;
}

.shop-title-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shop-title-plaque {
    background: linear-gradient(180deg, #8b0000, #5c0000);
    border: 2px solid #bf360c;
    border-radius: 8px;
    padding: 6px 24px;
    box-shadow: 0 0 15px rgba(255,215,0,0.5);
}

.shop-title-text {
    font-size: 22px;
    font-weight: bold;
    color: #bf360c;
    text-shadow: 0 0 10px rgba(255,215,0,0.8);
    letter-spacing: 4px;
}

.shop-subtitle {
    font-size: 11px;
    color: #c8b898;
    margin-top: 4px;
    font-style: italic;
}

/* 货币显示区 */
.shop-currencies-panel {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.5);
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(184,134,11,0.5);
}

.currency-display {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
}

.currency-display.gold { border-left: 3px solid #bf360c; }
.currency-display.ingot { border-left: 3px solid #ff6b6b; }
.currency-display.spiritStone { border-left: 3px solid #4ecdc4; }

.currency-icon { font-size: 16px; }
.currency-value { font-size: 16px; font-weight: bold; color: #fff; min-width: 40px; text-align: right; }
.currency-label { font-size: 10px; color: #999; }

.shop-recharge-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #ff5a3c 0%, #e02424 45%, #b91c1c 100%);
    border: 2px solid #ffd700;
    border-radius: 8px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
    letter-spacing: 3px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    box-shadow: 0 0 14px rgba(255,60,30,0.65), 0 0 4px rgba(255,215,0,0.55), inset 0 1px 0 rgba(255,255,255,0.3);
    transition: all 0.2s;
    animation: recharge-btn-glow 1.5s ease-in-out infinite;
}
.shop-recharge-icon { font-size: 17px; line-height: 1; filter: drop-shadow(0 0 3px rgba(255,215,0,0.8)); }
.shop-recharge-btn:hover {
    transform: scale(1.07);
    box-shadow: 0 0 26px rgba(255,80,30,0.95), 0 0 10px rgba(255,215,0,0.9);
}
.shop-recharge-btn:active { transform: scale(0.97); }
@keyframes recharge-btn-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(255,60,30,0.5), 0 0 3px rgba(255,215,0,0.4); }
    50% { box-shadow: 0 0 24px rgba(255,80,30,0.95), 0 0 12px rgba(255,215,0,0.85); }
}


.shop-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: 2px solid #b8860b;
    color: #bf360c;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.shop-close:hover {
    background: #dc2626;
    transform: rotate(90deg);
}

/* 主体三栏布局 */
.shop-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* 左侧面板 */
.shop-left-panel {
    width: 200px;
    background: rgba(0,0,0,0.4);
    border-right: 2px solid rgba(184,134,11,0.3);
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 12px;
}

/* NPC售货员 */
.shop-npc-area {
    text-align: center;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(184,134,11,0.2);
    transition: all 0.2s;
}

.shop-npc-area:hover {
    background: rgba(184,134,11,0.1);
    border-color: rgba(184,134,11,0.5);
}

.shop-npc-image {
    width: 100px;
    height: 140px;
    margin: 0 auto 8px;
    overflow: hidden;
}

.shop-npc-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shop-npc-name {
    font-size: 14px;
    font-weight: bold;
    color: #bf360c;
    margin-bottom: 4px;
}

.shop-npc-dialog {
    font-size: 11px;
    color: #c8b898;
    line-height: 1.4;
    padding: 6px;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    border: 1px dashed rgba(184,134,11,0.3);
}

/* 购买/出售切换 */
.shop-tabs {
    display: flex;
    gap: 4px;
}

.shop-tab {
    flex: 1;
    padding: 8px 4px;
    border: 1px solid rgba(184,134,11,0.3);
    background: rgba(0,0,0,0.3);
    color: #999;
    cursor: pointer;
    border-radius: 4px;
    font-size: 12px;
    transition: all 0.2s;
}

.shop-tab.active {
    background: linear-gradient(180deg, rgba(184,134,11,0.4), rgba(184,134,11,0.2));
    color: #bf360c;
    border-color: #bf360c;
}

.tab-icon { margin-right: 2px; }

/* 分类导航 */
.shop-categories {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shop-cat-title {
    font-size: 12px;
    color: #bf360c;
    font-weight: bold;
    padding: 4px 0;
    border-bottom: 1px solid rgba(184,134,11,0.3);
    margin-bottom: 4px;
}

.shop-cat-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid transparent;
    background: transparent;
    color: #c8b898;
    cursor: pointer;
    border-radius: 4px;
    font-size: 12px;
    text-align: left;
    transition: all 0.2s;
}

.shop-cat-btn:hover {
    background: rgba(184,134,11,0.1);
    color: #fff;
}

.shop-cat-btn.active {
    background: linear-gradient(90deg, rgba(184,134,11,0.3), transparent);
    border-left: 3px solid #bf360c;
    color: #bf360c;
}

.cat-icon { font-size: 14px; }
.cat-label { flex: 1; }
.cat-arrow { font-size: 10px; color: #bf360c; }

/* 中间面板 */
.shop-center-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    overflow: hidden;
}

/* 横幅广告 */
.shop-banner {
    margin-bottom: 12px;
    background: linear-gradient(90deg, rgba(139,0,0,0.8), rgba(184,134,11,0.6));
    border: 1px solid #bf360c;
    border-radius: 6px;
    padding: 8px 16px;
    text-align: center;
}

.banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.banner-tag {
    background: #bf360c;
    color: #8b0000;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.banner-text {
    color: #fff;
    font-size: 13px;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* 商品网格 */
.shop-items-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-right: 4px;
}

.shop-items-grid::-webkit-scrollbar { width: 6px; }
.shop-items-grid::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
.shop-items-grid::-webkit-scrollbar-thumb { background: rgba(184,134,11,0.4); border-radius: 3px; }

.shop-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px;
    color: #666;
}

.empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-text { font-size: 14px; }

/* 商品卡片 */
.shop-item-card {
    background: linear-gradient(180deg, rgba(45,31,15,0.9), rgba(26,18,8,0.95));
    border: 2px solid;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.2s;
    cursor: pointer;
}

.shop-item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 15px rgba(184,134,11,0.3);
}

/* 品质发光 */
.shop-item-card.quality-purple { box-shadow: 0 0 10px rgba(147,51,234,0.3); }
.shop-item-card.quality-blue { box-shadow: 0 0 10px rgba(59,130,246,0.3); }
.shop-item-card.quality-green { box-shadow: 0 0 10px rgba(34,197,94,0.3); }
.shop-item-card.quality-orange { box-shadow: 0 0 10px rgba(249,115,22,0.3); }
.shop-item-card.quality-red { box-shadow: 0 0 10px rgba(239,68,68,0.4); }

/* 角标 */
.item-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    z-index: 2;
}

.item-badge.hot { background: #dc2626; color: #fff; animation: badgePulse 1s infinite; }
.item-badge.new { background: #16a34a; color: #fff; }
.item-badge.限时 { background: #d97706; color: #fff; }

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* 物品图标 */
.shop-item-icon-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0 auto 8px;
}

.shop-item-icon {
    width: 56px;
    height: 56px;
    background-image: url('../assets/img/items.png');
    background-size: 192px 192px;
    border: 2px solid;
    border-radius: 6px;
    background-color: rgba(0,0,0,0.3);
}

.item-count {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 3px;
}

/* 物品信息 */
.shop-item-info {
    text-align: center;
    flex: 1;
    margin-bottom: 8px;
}

.shop-item-name {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 4px;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.shop-item-desc {
    font-size: 10px;
    color: #999;
    margin-bottom: 6px;
    line-height: 1.3;
    min-height: 26px;
}

.shop-item-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: center;
}

.shop-item-attr {
    font-size: 9px;
    color: #4ade80;
    background: rgba(74,222,128,0.15);
    padding: 1px 4px;
    border-radius: 2px;
}

/* 价格和按钮 */
.shop-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(184,134,11,0.2);
}

.shop-item-price {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    font-weight: bold;
}

.price-icon { font-size: 14px; }
.price-value { font-size: 14px; }
.price-count { font-size: 10px; color: #999; }

.shop-buy-btn, .shop-sell-btn {
    padding: 5px 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.2s;
}

.shop-buy-btn {
    background: linear-gradient(135deg, #bf360c, #b8860b);
    color: #1a1208;
}

.shop-buy-btn:hover:not(.disabled) {
    background: linear-gradient(135deg, #ffe55c, #bf360c);
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255,215,0,0.5);
}

.shop-buy-btn.disabled {
    background: #444;
    color: #888;
    cursor: not-allowed;
}

.shop-sell-btn {
    background: linear-gradient(135deg, #059669, #047857);
    color: #fff;
}

.shop-sell-btn:hover {
    background: linear-gradient(135deg, #10b981, #059669);
    transform: scale(1.05);
}

/* 右侧面板 */
.shop-right-panel {
    width: 180px;
    background: rgba(0,0,0,0.4);
    border-left: 2px solid rgba(184,134,11,0.3);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 今日推荐 */
.shop-recommend {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(184,134,11,0.3);
    border-radius: 6px;
    padding: 10px;
}

.recommend-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: bold;
    color: #bf360c;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(184,134,11,0.3);
}

.recommend-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.recommend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(0,0,0,0.2);
}

.recommend-item:hover {
    background: rgba(184,134,11,0.15);
    transform: translateX(2px);
}

.recommend-item-icon {
    width: 36px;
    height: 36px;
    background-image: url('../assets/img/items.png');
    background-size: 108px 108px;
    border: 2px solid;
    border-radius: 4px;
    flex-shrink: 0;
}

.recommend-item-info { flex: 1; min-width: 0; }

.recommend-item-name {
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recommend-item-price {
    font-size: 11px;
    font-weight: bold;
}

/* 购物提示 */
.shop-cart-hint {
    flex: 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(184,134,11,0.3);
    border-radius: 6px;
    padding: 10px;
}

.cart-hint-title {
    font-size: 13px;
    font-weight: bold;
    color: #bf360c;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(184,134,11,0.3);
}

.cart-hint-content p {
    font-size: 11px;
    color: #999;
    line-height: 1.8;
    margin: 0;
}

/* 动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}


/* ===== 锻造弹窗全新三栏布局样式 ===== */
.forge-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.forge-modal {
    width: 1050px;
    max-width: 95vw;
    height: 680px;
    max-height: 92vh;
    background: linear-gradient(180deg, #2d1a0a 0%, #1a0f05 100%);
    border: 3px solid #cd7f32;
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(205,127,50,0.5), inset 0 0 60px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 锻造背景图 */
.forge-modal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('../assets/img/modal-bg/forge-scene.png');
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    z-index: 0;
}

.forge-modal > * {
    position: relative;
    z-index: 1;
}

/* 顶部标题栏 */
.forge-header {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: linear-gradient(180deg, rgba(205,127,50,0.3), rgba(205,127,50,0.1));
    border-bottom: 2px solid #cd7f32;
    gap: 20px;
}

.forge-title-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.forge-title-plaque {
    background: linear-gradient(180deg, #8b4513, #5c2e0a);
    border: 2px solid #ff8c00;
    border-radius: 8px;
    padding: 6px 24px;
    box-shadow: 0 0 15px rgba(255,140,0,0.5);
}

.forge-title-text {
    font-size: 20px;
    font-weight: bold;
    color: #ff8c00;
    text-shadow: 0 0 10px rgba(255,140,0,0.8);
    letter-spacing: 3px;
}

.forge-subtitle {
    font-size: 11px;
    color: #d2b48c;
    margin-top: 4px;
    font-style: italic;
}

.forge-header-info {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.forge-gold-display {
    background: rgba(0,0,0,0.5);
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid rgba(205,127,50,0.5);
    color: #bf360c;
    font-weight: bold;
    font-size: 14px;
}

.forge-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(180deg, #3d2817, #2a1a0d);
    border: 2px solid #cd7f32;
    color: #ff8c00;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.forge-close:hover {
    background: linear-gradient(180deg, #dc2626, #8b0000);
    border-color: #ff6b6b;
    color: #fff;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 15px rgba(220,38,38,0.6);
}

/* 主体三栏布局 */
.forge-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* 左侧面板 */
.forge-left-panel {
    width: 220px;
    background: rgba(0,0,0,0.4);
    border-right: 2px solid rgba(205,127,50,0.3);
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 8px;
}

/* 铁匠NPC */
.forge-npc-area {
    text-align: center;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(205,127,50,0.2);
    transition: all 0.2s;
}

.forge-npc-area:hover {
    background: rgba(205,127,50,0.1);
    border-color: rgba(205,127,50,0.5);
}

.forge-npc-image {
    width: 80px;
    height: 100px;
    margin: 0 auto 6px;
    overflow: hidden;
}

.forge-npc-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.forge-npc-name {
    font-size: 13px;
    font-weight: bold;
    color: #ff8c00;
    margin-bottom: 2px;
}

.forge-npc-dialog {
    font-size: 10px;
    color: #d2b48c;
    line-height: 1.3;
    padding: 4px 6px;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    border: 1px dashed rgba(205,127,50,0.3);
    margin-top: 4px;
}

/* 装备部位选择 */
.forge-slots-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.forge-slots-title {
    font-size: 12px;
    color: #ff8c00;
    font-weight: bold;
    padding: 3px 0;
    border-bottom: 1px solid rgba(205,127,50,0.3);
    margin-bottom: 6px;
    text-align: center;
}

.forge-slots-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}

.forge-slot-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    border: 2px solid #5c3a1e;
    background: linear-gradient(180deg, #3d2817 0%, #2a1a0d 100%);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.3);
}

.forge-slot-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,140,0,0.3), transparent);
}

.forge-slot-btn:hover:not(.empty) {
    background: linear-gradient(180deg, #5c3a1e 0%, #3d2817 100%);
    border-color: #cd7f32;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 4px 12px rgba(205,127,50,0.3);
}

.forge-slot-btn:hover:not(.empty) .forge-slot-icon {
    transform: scale(1.2);
    filter: drop-shadow(0 0 6px rgba(255,140,0,0.6));
}

.forge-slot-btn.selected {
    background: linear-gradient(180deg, #8b4513 0%, #5c2e0a 100%);
    border-color: #ff8c00;
    box-shadow: 0 0 15px rgba(255,140,0,0.5), inset 0 0 10px rgba(255,140,0,0.2);
    animation: slotSelected 1.5s ease-in-out infinite;
}

@keyframes slotSelected {
    0%, 100% { box-shadow: 0 0 15px rgba(255,140,0,0.5), inset 0 0 10px rgba(255,140,0,0.2); }
    50% { box-shadow: 0 0 25px rgba(255,140,0,0.8), inset 0 0 15px rgba(255,140,0,0.3); }
}

.forge-slot-btn.selected::after {
    content: '✓';
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #bf360c, #ff8c00);
    border-radius: 50%;
    color: #1a0f05;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(255,215,0,0.6);
}

.forge-slot-btn.empty {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

.forge-slot-icon {
    font-size: 20px;
    transition: all 0.25s ease;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}

.forge-slot-label {
    font-size: 11px;
    color: #d2b48c;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.forge-slot-btn.selected .forge-slot-label {
    color: #bf360c;
}

.forge-slot-level {
    font-size: 11px;
    font-weight: bold;
    position: absolute;
    top: 3px;
    left: 4px;
    text-shadow: 0 0 4px currentColor;
}

/* 中间面板 */
.forge-center-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 16px;
}

/* 铁砧区域 */
.forge-anvil-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: radial-gradient(ellipse at center, rgba(255,100,0,0.1) 0%, transparent 70%);
    border-radius: 12px;
    min-height: 300px;
}

/* 熔炉光晕 */
.forge-furnace-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,100,0,0.3) 0%, transparent 70%);
    animation: furnaceGlow 2s ease-in-out infinite;
}

.forge-furnace-glow.active {
    animation: furnaceGlowActive 0.5s ease-in-out infinite;
}

@keyframes furnaceGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

@keyframes furnaceGlowActive {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* 装备展示 */
.forge-equip-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 1;
}

.forge-equip-icon {
    width: 150px;
    height: 150px;
    border: 3px solid;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 32%, rgba(255,190,90,0.16) 0%, rgba(40,25,8,0.55) 55%, rgba(18,12,5,0.92) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s;
}
/* 内框细金线 */
.forge-equip-icon::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(255, 215, 106, 0.38);
    border-radius: 11px;
    pointer-events: none;
    z-index: 1;
}
/* 四角金饰 */
.forge-equip-icon::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 19px;
    background:
        linear-gradient(#ffd76a, #ffd76a) left top / 18px 4px,
        linear-gradient(#ffd76a, #ffd76a) left top / 4px 18px,
        linear-gradient(#ffd76a, #ffd76a) right top / 18px 4px,
        linear-gradient(#ffd76a, #ffd76a) right top / 4px 18px,
        linear-gradient(#ffd76a, #ffd76a) left bottom / 18px 4px,
        linear-gradient(#ffd76a, #ffd76a) left bottom / 4px 18px,
        linear-gradient(#ffd76a, #ffd76a) right bottom / 18px 4px,
        linear-gradient(#ffd76a, #ffd76a) right bottom / 4px 18px;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 5px rgba(255, 215, 106, 0.7));
    pointer-events: none;
    z-index: 2;
}

.forge-equip-icon.enhancing {
    animation: equipShake 0.1s ease-in-out infinite;
}

@keyframes equipShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

.forge-equip-sprite {
    width: 64px;
    height: 64px;
    background-image: url('../assets/img/equipment.png');
    background-size: 192px 192px;
}

.forge-equip-level {
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 0 10px currentColor;
}

.forge-equip-name {
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* 占位符 */
.forge-equip-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 1;
}

.forge-placeholder-icon {
    font-size: 64px;
    opacity: 0.3;
}

.forge-placeholder-text {
    font-size: 14px;
    color: #666;
}

.forge-placeholder-icon-large {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: 8px;
}

/* 强化进度条 */
.forge-progress-area {
    text-align: center;
}

.forge-progress-label {
    font-size: 12px;
    color: #d2b48c;
    margin-bottom: 6px;
}

.forge-progress-bar {
    width: 100%;
    height: 16px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(205,127,50,0.3);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 4px;
}

.forge-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff8c00, #bf360c);
    border-radius: 8px;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(255,140,0,0.5);
}

.forge-progress-text {
    font-size: 12px;
    color: #bf360c;
    font-weight: bold;
}

/* 右侧面板 */
.forge-right-panel {
    width: 280px;
    background: rgba(0,0,0,0.4);
    border-left: 2px solid rgba(205,127,50,0.3);
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.forge-detail-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

.forge-detail-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
}

/* 装备信息头部 */
.forge-detail-header {
    text-align: center;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(205,127,50,0.3);
}

.forge-detail-name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 4px;
}

.forge-detail-quality {
    font-size: 12px;
    font-weight: bold;
}

/* 属性对比面板 */
.forge-stats-panel {
    flex: 1;
}

.forge-stats-title {
    font-size: 13px;
    color: #ff8c00;
    font-weight: bold;
    margin-bottom: 4px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(205,127,50,0.2);
}

.forge-stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    margin-bottom: 2px;
    font-size: 12px;
}

.forge-stat-icon {
    font-size: 14px;
}

.forge-stat-name {
    flex: 1;
    color: #d2b48c;
}

.forge-stat-current {
    color: #fff;
    font-weight: bold;
    min-width: 30px;
    text-align: right;
}

.forge-stat-arrow {
    color: #666;
}

.forge-stat-next {
    color: #4ade80;
    font-weight: bold;
    min-width: 30px;
}

.forge-stat-up {
    color: #4ade80;
    font-size: 10px;
}

/* 强化信息 */
.forge-enhance-info {
    padding: 10px;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    border: 1px solid rgba(205,127,50,0.2);
}

.forge-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
}

.forge-info-label {
    color: #d2b48c;
    font-size: 12px;
}

.forge-info-value {
    font-weight: bold;
    font-size: 13px;
}

.forge-info-value.gold {
    color: #bf360c;
}

.forge-info-value.rate {
    color: #4ade80;
}

/* 强化结果 */
.forge-result {
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    animation: resultPop 0.3s ease;
}

.forge-result.success {
    background: rgba(74,222,128,0.2);
    border: 1px solid #4ade80;
    color: #4ade80;
}

.forge-result.fail {
    background: rgba(239,68,68,0.2);
    border: 1px solid #ef4444;
    color: #ef4444;
}

@keyframes resultPop {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* 强化按钮 - 金属质感火焰风格 */
.forge-enhance-btn {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 16px;
    padding-right: 16px;
    background: linear-gradient(180deg, #ff8c00 0%, #cd5c00 50%, #8b3a00 100%);
    border: 2px solid #bf360c;
    border-radius: 10px;
    color: #fff;
    font-weight: bold;
    font-size: 17px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 0 20px rgba(255,140,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -2px 4px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    letter-spacing: 2px;
}

.forge-enhance-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.forge-enhance-btn:hover:not(.disabled)::before {
    left: 100%;
}

.forge-enhance-btn:hover:not(.disabled) {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 0 35px rgba(255,140,0,0.8),
        0 8px 20px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.4);
    border-color: #fff;
}

.forge-enhance-btn:active:not(.disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow: 
        0 0 15px rgba(255,140,0,0.6),
        inset 0 2px 8px rgba(0,0,0,0.4);
}

.forge-enhance-btn.disabled {
    background: linear-gradient(180deg, #555 0%, #333 100%);
    border-color: #666;
    color: #999;
    cursor: not-allowed;
    box-shadow: none;
    text-shadow: none;
    letter-spacing: 1px;
}

.forge-enhance-btn.enhancing {
    animation: enhancePulse 0.4s ease-in-out infinite;
    background: linear-gradient(180deg, #ff4500 0%, #ff6347 50%, #dc143c 100%);
}

@keyframes enhancePulse {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(255,69,0,0.6), inset 0 1px 0 rgba(255,255,255,0.3);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 40px rgba(255,69,0,1), 0 0 60px rgba(255,140,0,0.5);
        transform: scale(1.03);
    }
}


/* ===== 游戏界面锻造入口按钮 ===== */
.forge-entry-btn {
    background: linear-gradient(180deg, #8b4513 0%, #5c2e0a 100%) !important;
    border: 2px solid #cd7f32 !important;
    border-radius: 8px !important;
    color: #bf360c !important;
    font-size: 13px !important;
    font-weight: bold !important;
    padding: 6px 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 
        0 0 12px rgba(205,127,50,0.4),
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -2px 4px rgba(0,0,0,0.3) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
    position: relative !important;
    overflow: hidden !important;
    letter-spacing: 1px !important;
}

.forge-entry-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.3), transparent) !important;
    transition: left 0.5s ease !important;
}

.forge-entry-btn:hover::before {
    left: 100% !important;
}

.forge-entry-btn:hover {
    background: linear-gradient(180deg, #a0522d 0%, #8b4513 100%) !important;
    border-color: #bf360c !important;
    transform: translateY(-2px) !important;
    box-shadow: 
        0 0 20px rgba(255,140,0,0.6),
        0 4px 12px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

.forge-entry-btn:active {
    transform: translateY(0) !important;
    box-shadow: 
        0 0 10px rgba(205,127,50,0.5),
        inset 0 2px 6px rgba(0,0,0,0.4) !important;
}


/* ===== 战斗弹窗全新样式 ===== */
.battle-modal-new {
    width: 950px !important;
    max-width: 95vw !important;
    height: 680px !important;
    max-height: 92vh !important;
    background: linear-gradient(180deg, #2d1010 0%, #1a0808 100%) !important;
    border: 3px solid #dc2626 !important;
    border-radius: 12px !important;
    box-shadow: 0 0 60px rgba(220,38,38,0.5), inset 0 0 80px rgba(0,0,0,0.6) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 0 !important;
}

/* 战斗背景图 */
.battle-modal-new::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0 !important;
    background-image: url('../assets/img/modal-bg/battle-scene.png') !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 0.25 !important;
    z-index: 0 !important;
}

.battle-modal-new > * {
    position: relative !important;
    z-index: 1 !important;
}

/* 顶部标题栏 */
.battle-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: linear-gradient(180deg, rgba(220,38,38,0.3), rgba(220,38,38,0.1));
    border-bottom: 2px solid #dc2626;
}

.battle-title-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.battle-title-icon {
    font-size: 20px;
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251,191,36,0.6);
}

.battle-title-text {
    font-size: 22px;
    font-weight: bold;
    color: #fbbf24;
    text-shadow: 0 0 15px rgba(251,191,36,0.6), 2px 2px 4px rgba(0,0,0,0.5);
    letter-spacing: 6px;
}

.battle-turn-info {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.4);
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(220,38,38,0.4);
}

.battle-turn-label {
    font-size: 13px;
    color: #c8b898;
}

.battle-turn-num {
    font-size: 18px;
    font-weight: bold;
    color: #fbbf24;
    min-width: 24px;
    text-align: center;
}

.battle-speed-ctrl {
    display: flex;
    gap: 6px;
}

.battle-speed-btn {
    padding: 5px 12px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(220,38,38,0.3);
    border-radius: 6px;
    color: #888;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.battle-speed-btn:hover {
    border-color: #dc2626;
    color: #fff;
}

.battle-speed-btn.active {
    background: linear-gradient(180deg, #dc2626, #991b1b);
    border-color: #fbbf24;
    color: #fff;
    box-shadow: 0 0 10px rgba(220,38,38,0.5);
}

/* 中间战斗区域 */
.battle-arena-new {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    gap: 20px;
    min-height: 320px;
}

/* 战斗角色 */
.battle-combatant {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s ease;
}

.battle-combatant.attacking {
    animation: attackLunge 0.3s ease;
}

@keyframes attackLunge {
    0% { transform: translateX(0); }
    50% { transform: translateX(30px); }
    100% { transform: translateX(0); }
}

.monster-combatant.attacking {
    animation: attackLungeMonster 0.3s ease;
}

@keyframes attackLungeMonster {
    0% { transform: translateX(0); }
    50% { transform: translateX(-30px); }
    100% { transform: translateX(0); }
}

.battle-character-portrait {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.battle-character-aura {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    animation: auraPulse 2s ease-in-out infinite;
}

.player-aura {
    background: radial-gradient(circle, rgba(96,165,250,0.3) 0%, transparent 70%);
}

.monster-aura {
    background: radial-gradient(circle, rgba(239,68,68,0.3) 0%, transparent 70%);
}

@keyframes auraPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

.battle-character-img {
    position: relative;
    z-index: 1;
    border: 2px solid #fbbf24;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5), 0 0 20px rgba(251,191,36,0.3);
}

.monster-img {
    border-color: #dc2626;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5), 0 0 20px rgba(220,38,38,0.3);
}

.battle-character-shadow {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 16px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, transparent 70%);
    z-index: 0;
}

.battle-character-name {
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.player-name {
    color: #60a5fa;
}

.monster-name {
    color: #f87171;
}

.battle-character-level {
    font-size: 12px;
    color: #fbbf24;
    background: rgba(0,0,0,0.4);
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid rgba(251,191,36,0.3);
}

/* 血条新样式 */
.battle-hp-bar-new, .battle-mp-bar-new {
    width: 180px;
}

.battle-hp-bar-bg, .battle-mp-bar-bg {
    height: 16px;
    background: rgba(0,0,0,0.6);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    overflow: hidden;
    position: relative;
}

.battle-hp-fill-new {
    height: 100%;
    border-radius: 8px;
    transition: width 0.5s ease;
    position: relative;
}

.battle-hp-fill-new::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
}

.player-hp {
    background: linear-gradient(90deg, #22c55e, #16a34a);
    box-shadow: 0 0 10px rgba(34,197,94,0.5);
}

.monster-hp {
    background: linear-gradient(90deg, #ef4444, #dc2626);
    box-shadow: 0 0 10px rgba(239,68,68,0.5);
}

.battle-mp-fill-new {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 8px;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(59,130,246,0.5);
    position: relative;
}

.battle-mp-fill-new::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
}

.battle-hp-bar-text, .battle-mp-bar-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    margin-top: 2px;
}

.battle-hp-icon {
    color: #ef4444;
}

.battle-mp-icon {
    color: #60a5fa;
}

/* 属性 */
.battle-character-attrs {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.battle-attr-item {
    font-size: 12px;
    color: #c8b898;
    background: rgba(0,0,0,0.3);
    padding: 3px 8px;
    border-radius: 4px;
}

/* 怪物描述 */
.battle-monster-desc-new {
    font-size: 11px;
    color: #888;
    text-align: center;
    margin-top: 4px;
    max-width: 180px;
    line-height: 1.4;
}

/* 中间VS区域 */
.battle-vs-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100px;
}

.battle-vs-text {
    font-size: 48px;
    font-weight: bold;
    color: #fbbf24;
    text-shadow: 0 0 20px rgba(251,191,36,0.8), 0 0 40px rgba(251,191,36,0.4);
    letter-spacing: 4px;
    animation: vsPulse 1.5s ease-in-out infinite;
}

@keyframes vsPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

.battle-vs-effects {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    pointer-events: none;
}

.battle-slash-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #fbbf24, transparent);
    transform: translate(-50%, -50%) rotate(-45deg);
    animation: slashAnim 2s ease-in-out infinite;
    opacity: 0;
}

@keyframes slashAnim {
    0%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-45deg) scaleX(0); }
    50% { opacity: 1; transform: translate(-50%, -50%) rotate(-45deg) scaleX(1); }
}

/* 底部区域 */
.battle-bottom-area {
    padding: 12px 20px;
    background: linear-gradient(0deg, rgba(0,0,0,0.6), rgba(0,0,0,0.3));
    border-top: 2px solid rgba(220,38,38,0.3);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 技能栏 */
.battle-skill-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.battle-skill-bar-title {
    font-size: 13px;
    color: #fbbf24;
    font-weight: bold;
    padding: 4px 10px;
    background: rgba(0,0,0,0.4);
    border-radius: 6px;
    border: 1px solid rgba(251,191,36,0.3);
    white-space: nowrap;
}

.battle-skill-list {
    display: flex;
    gap: 6px;
    flex: 1;
    flex-wrap: wrap;
    min-width: 0;
}

.battle-skill-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 5px 8px;
    background: linear-gradient(180deg, #4c1d95, #2e1065);
    border: 2px solid #7c3aed;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 54px;
    max-width: 68px;
    flex: 0 1 auto;
    position: relative;
}

.battle-skill-btn:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(124,58,237,0.6);
    border-color: #a78bfa;
}

.battle-skill-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

.battle-skill-icon {
    font-size: 15px;
}

.battle-skill-icon img {
    width: 36px !important;
    height: 36px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    display: block !important;
    border: 1px solid rgba(233, 213, 255, 0.35) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.battle-skill-name {
    font-size: 10px;
    color: #e9d5ff;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 58px;
}

.battle-skill-cost {
    font-size: 9px;
    color: #60a5fa;
    background: rgba(0,0,0,0.4);
    padding: 0 5px;
    border-radius: 8px;
}

.battle-no-skill {
    font-size: 12px;
    color: #666;
    padding: 8px;
}

/* 操作按钮栏 */
.battle-action-bar {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.battle-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    border: 2px solid;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 88px;
    justify-content: center;
}

.attack-btn {
    background: linear-gradient(180deg, #dc2626, #991b1b);
    border-color: #f87171;
    color: #fff;
    box-shadow: 0 0 12px rgba(220,38,38,0.4);
}

.attack-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(220,38,38,0.7);
}

.defense-btn {
    background: linear-gradient(180deg, #2563eb, #1e40af);
    border-color: #60a5fa;
    color: #fff;
    box-shadow: 0 0 12px rgba(37,99,235,0.4);
}

.defense-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(37,99,235,0.7);
}

.potion-btn {
    background: linear-gradient(180deg, #059669, #047857);
    border-color: #34d399;
    color: #fff;
    box-shadow: 0 0 12px rgba(5,150,105,0.4);
}

.potion-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(5,150,105,0.7);
}

.flee-btn {
    background: linear-gradient(180deg, #6b7280, #4b5563);
    border-color: #9ca3af;
    color: #fff;
    box-shadow: 0 0 12px rgba(107,114,128,0.4);
}

.flee-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(107,114,128,0.7);
}

.action-btn-icon {
    font-size: 16px;
}

/* 战斗日志 */
.battle-log-new {
    height: 80px;
    overflow-y: auto;
    background: rgba(0,0,0,0.5);
    border-radius: 6px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,0.08);
}

.battle-log-new::-webkit-scrollbar {
    width: 6px;
}

.battle-log-new::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}

.battle-log-item-new {
    font-size: 12px;
    padding: 2px 0;
    line-height: 1.5;
}

.battle-log-item-new.player {
    color: #60a5fa;
}

.battle-log-item-new.monster {
    color: #f87171;
}

.battle-log-item-new.system {
    color: #fbbf24;
}

/* 战斗结果界面 */
.battle-result-modal {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.battle-result-content {
    text-align: center;
    padding: 40px;
}

.battle-result-content.victory {
    animation: victoryGlow 2s ease-in-out infinite;
}

@keyframes victoryGlow {
    0%, 100% { text-shadow: 0 0 20px rgba(251,191,36,0.5); }
    50% { text-shadow: 0 0 40px rgba(251,191,36,0.8); }
}

.battle-result-icon {
    font-size: 80px;
    margin-bottom: 20px;
    animation: resultBounce 1s ease;
}

@keyframes resultBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.battle-result-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 8px;
}

.battle-result-content.victory .battle-result-title {
    color: #fbbf24;
    text-shadow: 0 0 20px rgba(251,191,36,0.6);
}

.battle-result-content.defeat .battle-result-title {
    color: #ef4444;
    text-shadow: 0 0 20px rgba(239,68,68,0.6);
}

.battle-result-subtitle {
    font-size: 16px;
    color: #c8b898;
    margin-bottom: 30px;
}

.battle-rewards-new {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.battle-reward-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.4);
    padding: 16px 24px;
    border-radius: 10px;
    border: 1px solid rgba(251,191,36,0.3);
}

.reward-icon {
    font-size: 28px;
}

.reward-label {
    font-size: 12px;
    color: #888;
}

.reward-value {
    font-size: 20px;
    font-weight: bold;
    color: #fbbf24;
}

.battle-defeat-info {
    color: #888;
    margin-bottom: 30px;
    font-size: 14px;
}

.battle-confirm-btn {
    padding: 14px 50px;
    background: linear-gradient(180deg, #fbbf24, #d97706);
    border: 2px solid #fef3c7;
    border-radius: 10px;
    color: #1a1a2e;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0 20px rgba(251,191,36,0.5);
    letter-spacing: 4px;
}

.battle-confirm-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(251,191,36,0.8);
}


/* ===== 技能弹窗全新三栏布局样式 ===== */
.skill-modal-new {
    width: 950px !important;
    max-width: 95vw !important;
    height: 650px !important;
    max-height: 95vh !important;
    background: linear-gradient(180deg, #1a1a3e 0%, #0f0f2a 100%) !important;
    border: 3px solid #7c3aed !important;
    border-radius: 12px !important;
    box-shadow: 0 0 50px rgba(124,58,237,0.5), inset 0 0 60px rgba(0,0,0,0.6) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 0 !important;
}

/* 技能背景图 */
.skill-modal-new::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0 !important;
    background-image: url('../assets/img/modal-bg/skill-scene.png') !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 0.2 !important;
    z-index: 0 !important;
}

.skill-modal-new > * {
    position: relative !important;
    z-index: 1 !important;
}

/* 顶部标题栏 */
.skill-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: linear-gradient(180deg, rgba(124,58,237,0.3), rgba(124,58,237,0.1));
    border-bottom: 2px solid #7c3aed;
}

.skill-title-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.skill-title-icon {
    font-size: 20px;
}

.skill-title-text {
    font-size: 22px;
    font-weight: bold;
    color: #a78bfa;
    text-shadow: 0 0 15px rgba(167,139,250,0.6);
    letter-spacing: 6px;
}

.skill-points-display {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.4);
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(167,139,250,0.4);
    color: #c4b5fd;
    font-size: 14px;
}

.points-num {
    color: #fbbf24;
    font-weight: bold;
    font-size: 16px;
}

.skill-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(180deg, #3d2817, #2a1a0d);
    border: 2px solid #7c3aed;
    color: #a78bfa;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.skill-close-btn:hover {
    background: linear-gradient(180deg, #dc2626, #8b0000);
    border-color: #ff6b6b;
    color: #fff;
    transform: rotate(90deg);
}

/* 主体三栏 */
.skill-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* 左侧面板 */
.skill-left-panel {
    width: 200px;
    background: rgba(0,0,0,0.4);
    border-right: 2px solid rgba(124,58,237,0.3);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skill-npc-area {
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(124,58,237,0.2);
}

.skill-npc-image {
    width: 80px;
    height: 110px;
    margin: 0 auto 6px;
    overflow: hidden;
}

.skill-npc-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.skill-npc-name {
    font-size: 14px;
    font-weight: bold;
    color: #a78bfa;
    margin-bottom: 4px;
}

.skill-npc-dialog {
    font-size: 10px;
    color: #c4b5fd;
    line-height: 1.3;
    padding: 4px 6px;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    border: 1px dashed rgba(124,58,237,0.3);
}

.skill-categories {
    flex: 1;
}

.category-title {
    font-size: 13px;
    color: #a78bfa;
    font-weight: bold;
    padding: 4px 0;
    border-bottom: 1px solid rgba(124,58,237,0.3);
    margin-bottom: 8px;
    text-align: center;
}

.category-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 4px;
    background: rgba(0,0,0,0.3);
    border: 2px solid rgba(124,58,237,0.2);
    border-radius: 6px;
    color: #c4b5fd;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.category-btn:hover {
    background: rgba(124,58,237,0.15);
    border-color: rgba(124,58,237,0.5);
}

.category-btn.active {
    background: linear-gradient(180deg, #7c3aed, #5b21b6);
    border-color: #a78bfa;
    color: #fff;
    box-shadow: 0 0 10px rgba(124,58,237,0.5);
}

.category-icon {
    font-size: 16px;
}

/* 中间技能网格 */
.skill-center-panel {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.skill-grid-title {
    font-size: 14px;
    color: #a78bfa;
    font-weight: bold;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(124,58,237,0.3);
}

.skill-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    flex: 1;
    align-content: start;
}

.skill-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 3px;
    background: rgba(0,0,0,0.3);
    border: 2px solid rgba(124,58,237,0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.skill-grid-item:hover {
    background: rgba(124,58,237,0.15);
    border-color: rgba(124,58,237,0.5);
    transform: translateY(-2px);
}

.skill-grid-item.selected {
    background: rgba(124,58,237,0.25);
    border-color: #a78bfa;
    box-shadow: 0 0 15px rgba(124,58,237,0.5);
}

.skill-grid-item.not-learned {
    opacity: 0.6;
}

.skill-grid-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.skill-grid-item.learned .skill-grid-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.skill-grid-name {
    font-size: 12px;
    color: #e9d5ff;
    font-weight: bold;
    text-align: center;
}

.skill-grid-level {
    font-size: 10px;
    color: #fbbf24;
    background: rgba(0,0,0,0.4);
    padding: 1px 6px;
    border-radius: 8px;
}

.skill-grid-lock {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 12px;
}

/* 右侧详情面板 */
.skill-right-panel {
    width: 260px;
    background: rgba(0,0,0,0.4);
    border-left: 2px solid rgba(124,58,237,0.3);
    padding: 12px;
    display: flex;
    flex-direction: column;
}

.skill-detail-title {
    font-size: 14px;
    color: #a78bfa;
    font-weight: bold;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(124,58,237,0.3);
    text-align: center;
}

.skill-detail-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
    gap: 12px;
}

.placeholder-icon {
    font-size: 48px;
    opacity: 0.5;
}

.placeholder-text {
    font-size: 14px;
}

.skill-detail-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    flex: 1;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(124,58,237,0.6) rgba(0,0,0,0.2);
}

.skill-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(124,58,237,0.3);
}

.skill-detail-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 15px rgba(245,158,11,0.4);
}

.skill-detail-info {
    flex: 1;
}

.skill-detail-name {
    font-size: 16px;
    font-weight: bold;
    color: #fbbf24;
    margin-bottom: 4px;
}

.skill-detail-type {
    font-size: 12px;
    color: #a78bfa;
    background: rgba(124,58,237,0.2);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

.skill-detail-level {
    font-size: 13px;
    color: #c4b5fd;
}

.level-num {
    color: #fbbf24;
    font-weight: bold;
    font-size: 16px;
}

.skill-detail-desc {
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.4;
    padding: 6px 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.skill-detail-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
}

.stat-label {
    color: #9ca3af;
    font-size: 13px;
}

.stat-value {
    color: #fff;
    font-weight: bold;
    font-size: 13px;
}

.skill-detail-action {
    margin-top: auto;
}

.skill-upgrade-btn {
    width: 100%;
    padding: 8px;
    background: linear-gradient(180deg, #7c3aed, #5b21b6);
    border: 2px solid #a78bfa;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0 12px rgba(124,58,237,0.4);
}

.skill-upgrade-btn:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(124,58,237,0.7);
}

.skill-upgrade-btn.disabled {
    background: #444;
    border-color: #666;
    color: #888;
    cursor: not-allowed;
    box-shadow: none;
}

.skill-status {
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
}

.skill-status.not-learned {
    background: rgba(107,114,128,0.2);
    color: #9ca3af;
    border: 1px solid #6b7280;
}

.skill-status.max-level {
    background: rgba(251,191,36,0.2);
    color: #fbbf24;
    border: 1px solid #fbbf24;
}

/* 底部 */
.skill-footer {
    padding: 10px 20px;
    background: rgba(0,0,0,0.4);
    border-top: 1px solid rgba(124,58,237,0.3);
    text-align: center;
    font-size: 12px;
    color: #6b7280;
}


/* ===== 物品详情弹窗全新样式 ===== */
.item-modal-new {
    width: 520px !important;
    max-width: 90vw !important;
    background: linear-gradient(180deg, #2a1f14 0%, #1a140d 100%) !important;
    border: 3px solid #c9a96e !important;
    border-radius: 12px !important;
    box-shadow: 0 0 40px rgba(201,169,110,0.4), inset 0 0 40px rgba(0,0,0,0.5) !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 0 !important;
}

/* 物品背景图 */
.item-modal-new::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0 !important;
    background-image: url('../assets/img/modal-bg/item-scene.png') !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 0.15 !important;
    z-index: 0 !important;
}

.item-modal-new > * {
    position: relative !important;
    z-index: 1 !important;
}

/* 顶部标题栏 */
.item-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: linear-gradient(180deg, rgba(201,169,110,0.25), rgba(201,169,110,0.08));
    border-bottom: 2px solid #c9a96e;
}

.item-title-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.item-title-icon {
    font-size: 18px;
}

.item-title-text {
    font-size: 18px;
    font-weight: bold;
    color: #f5deb3;
    text-shadow: 0 0 10px rgba(245,222,179,0.5);
    letter-spacing: 4px;
}

.item-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, #3d2817, #2a1a0d);
    border: 2px solid #c9a96e;
    color: #f5deb3;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.item-close-btn:hover {
    background: linear-gradient(180deg, #dc2626, #8b0000);
    border-color: #ff6b6b;
    color: #fff;
    transform: rotate(90deg);
}

/* 主体两栏 */
.item-body {
    display: flex;
    padding: 20px;
    gap: 20px;
}

/* 左侧物品展示 */
.item-left-panel {
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.item-display-area {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-large-icon {
    width: 100px;
    height: 100px;
    background-size: 300% 300% !important;
    background-repeat: no-repeat !important;
    border-radius: 12px;
    border: 3px solid #c9a96e;
    box-shadow: 0 0 20px rgba(201,169,110,0.3), inset 0 0 20px rgba(0,0,0,0.3);
    position: relative;
    z-index: 2;
}

.item-large-icon.quality-1 { border-color: #9ca3af; box-shadow: 0 0 15px rgba(156,163,175,0.4); }
.item-large-icon.quality-2 { border-color: #22c55e; box-shadow: 0 0 15px rgba(34,197,94,0.5); }
.item-large-icon.quality-3 { border-color: #3b82f6; box-shadow: 0 0 15px rgba(59,130,246,0.5); }
.item-large-icon.quality-4 { border-color: #a855f7; box-shadow: 0 0 20px rgba(168,85,247,0.6); }
.item-large-icon.quality-5 { border-color: #f59e0b; box-shadow: 0 0 25px rgba(245,158,11,0.7); }
.item-large-icon.quality-6 { border-color: #ef4444; box-shadow: 0 0 30px rgba(239,68,68,0.8); }

.item-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(201,169,110,0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: itemGlow 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes itemGlow {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.item-name-area {
    text-align: center;
    width: 100%;
}

.item-name {
    font-size: 18px;
    font-weight: bold;
    color: #f5deb3;
    margin-bottom: 6px;
}

.item-name.quality-text-1 { color: #d1d5db; }
.item-name.quality-text-2 { color: #4ade80; }
.item-name.quality-text-3 { color: #60a5fa; }
.item-name.quality-text-4 { color: #c084fc; }
.item-name.quality-text-5 { color: #fbbf24; }
.item-name.quality-text-6 { color: #f87171; }

.item-quality-tag {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(0,0,0,0.4);
    border: 1px solid #c9a96e;
    color: #f5deb3;
    margin-left: 6px;
}

.item-type {
    font-size: 12px;
    color: #a08060;
    margin-top: 6px;
}

/* 右侧详情 */
.item-right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.item-detail-title {
    font-size: 14px;
    color: #00838f;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(201,169,110,0.3);
}

.item-detail-desc {
    font-size: 13px;
    color: #d4c4a8;
    line-height: 1.6;
    padding: 10px;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    margin-bottom: 12px;
}

.item-detail-attrs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.item-attr-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
}

.item-attr-name {
    color: #a08060;
    font-size: 13px;
}

.item-attr-val {
    color: #4ade80;
    font-weight: bold;
    font-size: 13px;
}

.item-detail-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,169,110,0.4), transparent);
    margin: 8px 0;
}

.item-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

.item-action-btn {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid;
}

.item-action-btn.equip {
    background: linear-gradient(180deg, #16a34a, #15803d);
    border-color: #4ade80;
    color: #fff;
}

.item-action-btn.equip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(34,197,94,0.5);
}

.item-action-btn.use {
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    border-color: #60a5fa;
    color: #fff;
}

.item-action-btn.use:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(59,130,246,0.5);
}

.item-action-btn.enchant {
    background: linear-gradient(180deg, #9333ea, #7e22ce);
    border-color: #c084fc;
    color: #fff;
}

.item-action-btn.enchant:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(168,85,247,0.5);
}

.item-action-btn.unequip {
    background: linear-gradient(180deg, #d97706, #b45309);
    border-color: #fbbf24;
    color: #fff;
}

.item-action-btn.unequip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(245,158,11,0.5);
}

.item-action-btn.discard {
    background: linear-gradient(180deg, #dc2626, #b91c1c);
    border-color: #f87171;
    color: #fff;
}

.item-action-btn.discard:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(239,68,68,0.5);
}


/* ===== 排行榜弹窗全新三栏布局样式 ===== */
.ranking-modal-new {
    width: 900px !important;
    max-width: 95vw !important;
    height: 620px !important;
    max-height: 92vh !important;
    background: linear-gradient(180deg, #1a1510 0%, #0f0d08 100%) !important;
    border: 3px solid #d4af37 !important;
    border-radius: 12px !important;
    box-shadow: 0 0 50px rgba(212,175,55,0.4), inset 0 0 60px rgba(0,0,0,0.6) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 0 !important;
}

/* 顶部标题栏 */
.ranking-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: linear-gradient(180deg, rgba(212,175,55,0.25), rgba(212,175,55,0.08));
    border-bottom: 2px solid #d4af37;
}

.ranking-title-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ranking-title-icon {
    font-size: 22px;
}

.ranking-title-text {
    font-size: 22px;
    font-weight: bold;
    color: #bf360c;
    text-shadow: 0 0 15px rgba(255,215,0,0.6);
    letter-spacing: 6px;
}

.ranking-my-rank {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.4);
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(212,175,55,0.4);
    color: #d4c4a8;
    font-size: 14px;
}

.my-rank-num {
    color: #bf360c;
    font-weight: bold;
    font-size: 16px;
}

.ranking-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(180deg, #3d2817, #2a1a0d);
    border: 2px solid #d4af37;
    color: #bf360c;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.ranking-close-btn:hover {
    background: linear-gradient(180deg, #dc2626, #8b0000);
    border-color: #ff6b6b;
    color: #fff;
    transform: rotate(90deg);
}

/* 主体三栏 */
.ranking-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* 左侧面板 */
.ranking-left-panel {
    width: 180px;
    background: rgba(0,0,0,0.4);
    border-right: 2px solid rgba(212,175,55,0.3);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ranking-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ranking-tab-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 12px;
    background: rgba(0,0,0,0.3);
    border: 2px solid rgba(212,175,55,0.2);
    border-radius: 8px;
    color: #b8a88a;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.ranking-tab-btn:hover {
    background: rgba(212,175,55,0.1);
    border-color: rgba(212,175,55,0.5);
}

.ranking-tab-btn.active {
    background: linear-gradient(180deg, #d4af37, #b8941f);
    border-color: #bf360c;
    color: #1a1510;
    box-shadow: 0 0 15px rgba(212,175,55,0.5);
}

.tab-icon {
    font-size: 18px;
}

.tab-label {
    font-size: 15px;
    font-weight: bold;
}

.tab-desc {
    font-size: 10px;
    opacity: 0.7;
}

.ranking-tip {
    margin-top: auto;
    padding: 12px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    border: 1px dashed rgba(212,175,55,0.3);
}

.tip-title {
    font-size: 13px;
    color: #bf360c;
    font-weight: bold;
    margin-bottom: 6px;
}

.tip-content {
    font-size: 11px;
    color: #78909c;
    line-height: 1.4;
}

/* 中间排行榜 */
.ranking-center-panel {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 前三名领奖台 */
.ranking-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(212,175,55,0.2);
}

.podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}

.podium-item.first {
    transform: translateY(-10px);
}

.podium-crown {
    font-size: 24px;
    margin-bottom: -5px;
    animation: crownBounce 1s ease-in-out infinite;
}

@keyframes crownBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.podium-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
}

.podium-item.first .podium-avatar {
    background: linear-gradient(135deg, #bf360c, #b8860b);
    box-shadow: 0 0 20px rgba(255,215,0,0.6);
    width: 60px;
    height: 60px;
    font-size: 26px;
}

.podium-item.second .podium-avatar {
    background: linear-gradient(135deg, #c0c0c0, #808080);
    box-shadow: 0 0 15px rgba(192,192,192,0.5);
}

.podium-item.third .podium-avatar {
    background: linear-gradient(135deg, #cd7f32, #8b4513);
    box-shadow: 0 0 15px rgba(205,127,50,0.5);
}

.podium-name {
    font-size: 13px;
    font-weight: bold;
    color: #e8d8b8;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podium-value {
    font-size: 12px;
    color: #bf360c;
    font-weight: bold;
}

.podium-medal {
    font-size: 18px;
}

/* 排行榜列表 */
.ranking-list-header {
    display: flex;
    padding: 8px 12px;
    background: rgba(212,175,55,0.15);
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #d4af37;
    font-weight: bold;
}

.col-rank { width: 50px; }
.col-name { flex: 1; }
.col-sect { width: 80px; }
.col-value { width: 80px; text-align: right; }

.ranking-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ranking-list::-webkit-scrollbar {
    width: 6px;
}

.ranking-list::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2);
}

.ranking-list::-webkit-scrollbar-thumb {
    background: rgba(212,175,55,0.4);
    border-radius: 3px;
}

.ranking-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.ranking-item:hover {
    background: rgba(212,175,55,0.1);
    border-color: rgba(212,175,55,0.3);
}

.ranking-item.me {
    background: rgba(212,175,55,0.15);
    border-color: rgba(212,175,55,0.5);
}

.ranking-num {
    width: 50px;
    font-size: 14px;
    font-weight: bold;
    color: #78909c;
}

.ranking-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4a5568, #2d3748);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    margin-right: 8px;
}

.ranking-name {
    flex: 1;
    font-size: 13px;
    color: #d4c4a8;
    font-weight: 500;
}

.ranking-sect {
    width: 80px;
    font-size: 11px;
    color: #78909c;
}

.ranking-value {
    width: 80px;
    text-align: right;
    font-size: 13px;
    color: #bf360c;
    font-weight: bold;
}

/* 右侧玩家详情 */
.ranking-right-panel {
    width: 220px;
    background: rgba(0,0,0,0.4);
    border-left: 2px solid rgba(212,175,55,0.3);
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.ranking-detail-title {
    font-size: 14px;
    color: #bf360c;
    font-weight: bold;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(212,175,55,0.3);
    text-align: center;
}

.ranking-detail-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #5a4a3a;
    gap: 12px;
}

.ranking-detail-placeholder .placeholder-icon {
    font-size: 48px;
    opacity: 0.5;
}

.ranking-detail-placeholder .placeholder-text {
    font-size: 13px;
}

.ranking-detail-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.detail-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4af37, #455a64);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 20px rgba(212,175,55,0.4);
}

.detail-name {
    font-size: 18px;
    font-weight: bold;
    color: #bf360c;
}

.detail-title {
    font-size: 12px;
    color: #d4af37;
    background: rgba(212,175,55,0.15);
    padding: 2px 10px;
    border-radius: 10px;
}

.detail-sect {
    font-size: 12px;
    color: #78909c;
}

.detail-stats {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.detail-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
}

.detail-stat-row .stat-label {
    color: #78909c;
    font-size: 12px;
}

.detail-stat-row .stat-val {
    color: #e8d8b8;
    font-weight: bold;
    font-size: 12px;
}

.detail-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

.detail-btn {
    width: 100%;
    padding: 8px;
    background: linear-gradient(180deg, #3d2817, #2a1a0d);
    border: 2px solid #d4af37;
    border-radius: 6px;
    color: #bf360c;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.detail-btn:hover {
    background: linear-gradient(180deg, #d4af37, #b8941f);
    color: #1a1510;
    transform: translateY(-1px);
}


/* ===== 副本弹窗全新三栏布局样式 ===== */
.dungeon-modal-new {
    width: 900px !important;
    max-width: 95vw !important;
    height: 600px !important;
    max-height: 92vh !important;
    background: linear-gradient(180deg, #1a1208 0%, #0f0a05 100%) !important;
    border: 3px solid #cd7f32 !important;
    border-radius: 12px !important;
    box-shadow: 0 0 50px rgba(205,127,50,0.4), inset 0 0 60px rgba(0,0,0,0.6) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 0 !important;
}

/* 顶部标题栏 */
.dungeon-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: linear-gradient(180deg, rgba(205,127,50,0.25), rgba(205,127,50,0.08));
    border-bottom: 2px solid #cd7f32;
}

.dungeon-title-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dungeon-title-icon {
    font-size: 22px;
}

.dungeon-title-text {
    font-size: 22px;
    font-weight: bold;
    color: #cd7f32;
    text-shadow: 0 0 15px rgba(205,127,50,0.6);
    letter-spacing: 6px;
}

.dungeon-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(180deg, #3d2817, #2a1a0d);
    border: 2px solid #cd7f32;
    color: #cd7f32;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.dungeon-close-btn:hover {
    background: linear-gradient(180deg, #dc2626, #8b0000);
    border-color: #ff6b6b;
    color: #fff;
    transform: rotate(90deg);
}

/* 主体三栏 */
.dungeon-modal-new .dungeon-body {
    flex: 1 !important;
    display: flex !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.panel-title {
    font-size: 14px;
    color: #cd7f32;
    font-weight: bold;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(205,127,50,0.3);
    margin-bottom: 10px;
    text-align: center;
}

.section-title {
    font-size: 14px;
    color: #cd7f32;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(205,127,50,0.2);
}

/* 左侧副本列表 */
.dungeon-left-panel {
    width: 240px;
    background: rgba(0,0,0,0.4);
    border-right: 2px solid rgba(205,127,50,0.3);
    padding: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dungeon-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dungeon-list::-webkit-scrollbar {
    width: 6px;
}

.dungeon-list::-webkit-scrollbar-thumb {
    background: rgba(205,127,50,0.4);
    border-radius: 3px;
}

.dungeon-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(0,0,0,0.3);
    border: 2px solid rgba(205,127,50,0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.dungeon-card:hover {
    background: rgba(205,127,50,0.1);
    border-color: rgba(205,127,50,0.5);
}

.dungeon-card.selected {
    background: rgba(205,127,50,0.2);
    border-color: #cd7f32;
    box-shadow: 0 0 12px rgba(205,127,50,0.4);
}

.dungeon-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.dungeon-card-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #cd7f32, #8b4513);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.dungeon-card-info {
    flex: 1;
    min-width: 0;
}

.dungeon-card-name {
    font-size: 13px;
    font-weight: bold;
    color: #e8d8b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dungeon-difficulty {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(0,0,0,0.4);
}

.dungeon-card-level {
    font-size: 11px;
    color: #78909c;
    margin-top: 2px;
}

.dungeon-card-count {
    font-size: 10px;
    color: #6a5a4a;
    margin-top: 1px;
}

.dungeon-card-status {
    font-size: 11px;
    color: #22c55e;
    font-weight: bold;
    flex-shrink: 0;
}

/* 中间副本详情 */
.dungeon-modal-new .dungeon-center-panel {
    flex: 1 !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-width: 0 !important;
}

.dungeon-detail {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    opacity: 1 !important;
    animation: none !important;
}

.dungeon-modal-new .dungeon-detail,
.dungeon-modal-new .dungeon-detail-header,
.dungeon-modal-new .dungeon-stages,
.dungeon-modal-new .dungeon-stage {
    opacity: 1 !important;
    animation: none !important;
}

.dungeon-detail::-webkit-scrollbar {
    width: 6px;
}

.dungeon-detail::-webkit-scrollbar-thumb {
    background: rgba(205,127,50,0.4);
    border-radius: 3px;
}

.dungeon-modal-new .dungeon-detail-header {
    display: flex !important;
    flex-direction: row !important;
    gap: 14px !important;
    padding: 12px !important;
    background: rgba(0,0,0,0.3) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(205,127,50,0.2) !important;
}

.dungeon-detail-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #cd7f32, #8b4513);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    flex-shrink: 0;
    box-shadow: 0 0 15px rgba(205,127,50,0.3);
}

.dungeon-detail-title {
    flex: 1;
}

.dungeon-detail-name {
    font-size: 18px;
    font-weight: bold;
    color: #cd7f32;
    margin-bottom: 6px;
}

.dungeon-detail-desc {
    font-size: 12px;
    color: #a09070;
    line-height: 1.5;
}

/* 关卡列表 */
.dungeon-stages {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dungeon-stage {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    border: 1px solid rgba(205,127,50,0.15);
}

.dungeon-stage.boss {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.3);
}

.stage-num {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #cd7f32, #8b4513);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    flex-shrink: 0;
}

.dungeon-stage.boss .stage-num {
    background: linear-gradient(135deg, #ef4444, #991b1b);
}

.stage-info {
    flex: 1;
}

.stage-name {
    font-size: 13px;
    color: #e8d8b8;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.boss-tag {
    font-size: 10px;
    padding: 1px 6px;
    background: linear-gradient(180deg, #ef4444, #991b1b);
    color: #fff;
    border-radius: 3px;
    font-weight: bold;
}

.stage-monster {
    font-size: 11px;
    color: #78909c;
    margin-top: 2px;
}

/* 右侧奖励面板 */
.dungeon-right-panel {
    width: 240px;
    background: rgba(0,0,0,0.4);
    border-left: 2px solid rgba(205,127,50,0.3);
    padding: 12px;
    display: flex;
    flex-direction: column;
}

.dungeon-reward-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.reward-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.reward-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    border: 1px solid rgba(205,127,50,0.15);
}

.reward-icon {
    font-size: 16px;
}

.reward-name {
    flex: 1;
    font-size: 12px;
    color: #b8a88a;
}

.reward-count {
    font-size: 13px;
    color: #fbbf24;
    font-weight: bold;
}

.dungeon-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
}

.info-label {
    font-size: 12px;
    color: #78909c;
}

.info-val {
    font-size: 12px;
    color: #e8d8b8;
    font-weight: 500;
}

.dungeon-enter-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(180deg, #cd7f32, #8b4513);
    border: 2px solid #daa520;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0 15px rgba(205,127,50,0.4);
    margin-top: auto;
}

.dungeon-enter-btn:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(205,127,50,0.7);
}

.dungeon-enter-btn.disabled {
    background: #444;
    border-color: #666;
    color: #888;
    cursor: not-allowed;
    box-shadow: none;
}


/* ===== 副本战斗进度样式 ===== */
.battle-dungeon-progress {
    margin: 15px 0;
    padding: 12px;
    background: rgba(0,0,0,0.4);
    border-radius: 8px;
    border: 1px solid rgba(205,127,50,0.3);
}

.dungeon-progress-title {
    font-size: 16px;
    color: #cd7f32;
    font-weight: bold;
    text-align: center;
    margin-bottom: 6px;
}

.dungeon-progress-stage {
    font-size: 12px;
    color: #b8a88a;
    text-align: center;
    margin-bottom: 8px;
}

.dungeon-progress-bar {
    height: 8px;
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
    overflow: hidden;
}

.dungeon-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #cd7f32, #daa520);
    border-radius: 4px;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(205,127,50,0.5);
}

.battle-dungeon-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.battle-continue-btn {
    flex: 1;
    padding: 12px 20px;
    background: linear-gradient(180deg, #cd7f32, #8b4513);
    border: 2px solid #daa520;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0 15px rgba(205,127,50,0.4);
}

.battle-continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(205,127,50,0.7);
}

.battle-confirm-btn.secondary {
    flex: 0 0 auto;
    padding: 12px 16px;
    background: linear-gradient(180deg, #444, #333);
    border: 2px solid #666;
    color: #aaa;
    font-size: 13px;
}

.battle-confirm-btn.secondary:hover {
    background: linear-gradient(180deg, #555, #444);
    color: #ccc;
}


/* ===== 副本图标图片样式 ===== */
.dungeon-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.dungeon-detail-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.dungeon-card-icon {
    overflow: hidden;
    padding: 0 !important;
}

.dungeon-detail-icon {
    overflow: hidden;
    padding: 0 !important;
}


/* ===== 战斗大立绘样式 ===== */
.battle-portrait-large {
    width: 140px !important;
    height: 180px !important;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.battle-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}

.player-portrait-img {
    transform: scaleX(1);
}

.monster-portrait-img {
    transform: scaleX(-1); /* 怪物面向左侧 */
}

.battle-portrait-large .battle-character-aura {
    width: 120px !important;
    height: 120px !important;
    bottom: 10px !important;
}

.battle-portrait-large .battle-character-shadow {
    width: 100px !important;
    height: 20px !important;
    bottom: 0 !important;
}

/* 战斗区域调整，适应大立绘 */
.battle-arena-new {
    min-height: 240px !important;
    padding: 20px 40px !important;
}

.battle-combatant {
    gap: 8px !important;
}

/* 立绘呼吸动画 */
@keyframes portraitBreath {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.player-portrait-img {
    animation: portraitBreath 3s ease-in-out infinite;
}

.monster-portrait-img {
    animation: portraitBreath 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

/* 立绘受击晃动 */
@keyframes portraitHit {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

.battle-portrait-img.hit {
    animation: portraitHit 0.3s ease;
}


/* ===== 在线泡点（打坐修炼）状态指示器 ===== */
.afk-status-indicator {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.95), rgba(50, 35, 20, 0.9));
    border: 2px solid #c9a96e;
    border-radius: 12px;
    padding: 10px 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 215, 150, 0.2);
    backdrop-filter: blur(5px);
    animation: afkGlow 3s ease-in-out infinite;
}

@keyframes afkGlow {
    0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 10px rgba(69, 90, 100, 0.2); }
    50% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(201, 169, 110, 0.6); }
}

.afk-icon {
    font-size: 28px;
    animation: afkFloat 2s ease-in-out infinite;
}

@keyframes afkFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.afk-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

.afk-title {
    font-size: 13px;
    font-weight: bold;
    color: #f0d9a8;
    letter-spacing: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.afk-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(69, 90, 100, 0.2);
}

.afk-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00838f, #f0d9a8, #00838f);
    border-radius: 3px;
    transition: width 1s linear;
    box-shadow: 0 0 8px rgba(240, 217, 168, 0.6);
}

.afk-stats {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #d4c4a0;
}

.afk-stats span:first-child {
    color: #a8d4a0;
}

.afk-stats span:last-child {
    color: #a0c4d4;
}

.afk-daily {
    font-size: 10px;
    color: #8a7a60;
    text-align: center;
}


/* ===== 打坐修炼圆形进度条UI ===== */
.meditation-container {
    position: fixed;
    bottom: 120px;
    right: 240px;
    z-index: 90;
    width: 100px;
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: meditationFloat 3s ease-in-out infinite;
}

@keyframes meditationFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.meditation-circle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 90px;
    filter: drop-shadow(0 0 10px rgba(64, 224, 208, 0.6));
}

.meditation-circle-progress {
    transition: stroke-dashoffset 1s linear;
    filter: drop-shadow(0 0 6px rgba(64, 224, 208, 0.8));
}

.meditation-character {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    object-fit: contain;
    background: transparent !important;
    mix-blend-mode: normal;
    animation: meditationBreath 4s ease-in-out infinite;
    z-index: 1;
}

@keyframes meditationBreath {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.95; }
    50% { transform: translateX(-50%) scale(1.03); opacity: 1; }
}

.meditation-stats {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.8);
}

.meditation-exp {
    color: #7fff7f;
    background: rgba(0, 0, 0, 0.5);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid rgba(127, 255, 127, 0.3);
}

.meditation-cult {
    color: #7fd4ff;
    background: rgba(0, 0, 0, 0.5);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid rgba(127, 212, 255, 0.3);
}

.meditation-hide-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(30, 20, 10, 0.9);
    border: 1px solid #c9a96e;
    color: #00838f;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
    transition: all 0.2s;
}

.meditation-hide-btn:hover {
    background: #00838f;
    color: #1e140a;
}

.meditation-show-btn {
    position: fixed;
    bottom: 80px;
    right: 80px;
    z-index: 90;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.95), rgba(50, 35, 20, 0.9));
    border: 2px solid #c9a96e;
    color: #f0d9a8;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(69, 90, 100, 0.2);
    animation: meditationGlow 2s ease-in-out infinite;
}

@keyframes meditationGlow {
    0%, 100% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(69, 90, 100, 0.2); }
    50% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(201, 169, 110, 0.6); }
}

.meditation-show-btn:hover {
    transform: scale(1.1);
}


/* ===== 泡点奖励飘动数字 ===== */
.meditation-float-number {
    position: fixed;
    z-index: 200;
    font-size: 16px;
    font-weight: bold;
    pointer-events: none;
    animation: meditationFloatUp 2s ease-out forwards;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6);
}

.meditation-float-exp {
    color: #40e0d0;
}

.meditation-float-cult {
    color: #87ceeb;
}

@keyframes meditationFloatUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateY(-30px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.8);
    }
}


/* ===== 宠物系统弹窗（灵兽园） ===== */
.pet-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    opacity: 1 !important;
}

@keyframes petModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes petModalScaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.pet-modal {
    width: 900px;
    max-width: 95vw;
    height: 620px;
    max-height: 92vh;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(201, 169, 110, 0.4), 0 20px 60px rgba(0, 0, 0, 0.6);
    border: 2px solid #c9a96e;
    display: flex;
    flex-direction: column;
    opacity: 1 !important;
    transform: none !important;
}

.pet-modal-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('../assets/img/bg-pet.jpg') center/cover no-repeat;
    z-index: 0;
}

.pet-modal-bg::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(20, 15, 10, 0.85) 0%, rgba(30, 22, 15, 0.9) 50%, rgba(20, 15, 10, 0.92) 100%);
}

.pet-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: linear-gradient(180deg, rgba(40, 30, 20, 0.95) 0%, rgba(30, 22, 15, 0.85) 100%);
    border-bottom: 2px solid #c9a96e;
}

.pet-title-area {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pet-title-plaque {
    background: linear-gradient(180deg, #455a64 0%, #00838f 50%, #455a64 100%);
    padding: 4px 20px;
    border-radius: 4px;
    border: 1px solid #f0d9a8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.pet-title-text {
    font-size: 20px;
    font-weight: bold;
    color: #2a1f0f;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    letter-spacing: 2px;
}

.pet-subtitle {
    font-size: 11px;
    color: #00838f;
    font-style: italic;
    margin-left: 8px;
}

.pet-currencies {
    display: flex;
    gap: 12px;
}

.pet-currency {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid rgba(201, 169, 110, 0.4);
}

.pet-currency-icon { font-size: 14px; }
.pet-currency-value { color: #f0d9a8; font-weight: bold; font-size: 14px; }
.pet-currency.gold .pet-currency-value { color: #bf360c; }
.pet-currency.ingot .pet-currency-value { color: #ffb347; }
.pet-currency.spirit .pet-currency-value { color: #87ceeb; }

.pet-close-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, #8b3a3a 0%, #5c2020 100%);
    border: 1px solid #c9a96e;
    color: #f0d9a8;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.pet-close-btn:hover { background: linear-gradient(180deg, #a04040 0%, #6c2525 100%); transform: scale(1.1); }

.pet-tabs {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 4px;
    padding: 8px 20px 0;
    background: rgba(30, 22, 15, 0.7);
}

.pet-tab {
    padding: 8px 20px;
    background: rgba(40, 30, 20, 0.6);
    border: 1px solid rgba(69, 90, 100, 0.2);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    color: #a08060;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}
.pet-tab:hover { color: #f0d9a8; background: rgba(60, 45, 30, 0.8); }
.pet-tab.active {
    background: linear-gradient(180deg, rgba(60, 45, 30, 0.95) 0%, rgba(40, 30, 20, 0.95) 100%);
    color: #f0d9a8;
    border-color: #c9a96e;
    font-weight: bold;
}

.pet-body {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    overflow: hidden;
    padding: 12px;
    gap: 12px;
}

/* 左侧分类栏 */
.pet-sidebar {
    width: 130px;
    background: rgba(20, 15, 10, 0.7);
    border: 1px solid rgba(69, 90, 100, 0.2);
    border-radius: 8px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pet-sidebar-title {
    text-align: center;
    color: #00838f;
    font-size: 13px;
    font-weight: bold;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(69, 90, 100, 0.2);
    margin-bottom: 4px;
}

.pet-sidebar-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #a08060;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    text-align: left;
}
.pet-sidebar-item:hover { background: rgba(69, 90, 100, 0.1); color: #f0d9a8; }
.pet-sidebar-item.active {
    background: linear-gradient(90deg, rgba(69, 90, 100, 0.2) 0%, transparent 100%);
    border-color: #c9a96e;
    color: #f0d9a8;
    font-weight: bold;
}

.pet-sidebar-icon { font-size: 14px; }

/* 中间网格 */
.pet-grid-area {
    flex: 1;
    overflow-y: auto;
    background: rgba(20, 15, 10, 0.5);
    border: 1px solid rgba(69, 90, 100, 0.2);
    border-radius: 8px;
    padding: 12px;
}

.pet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pet-item {
    background: linear-gradient(180deg, rgba(40, 30, 20, 0.9) 0%, rgba(25, 18, 12, 0.95) 100%);
    border: 2px solid #555;
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.pet-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
.pet-item.selected { border-color: #f0d9a8; box-shadow: 0 0 12px rgba(240, 217, 168, 0.5); }
.pet-item.equipped { border-color: #4caf50; }

.pet-item.quality-common { border-color: #9e9e9e; }
.pet-item.quality-rare { border-color: #4caf50; box-shadow: 0 0 6px rgba(76, 175, 80, 0.3); }
.pet-item.quality-epic { border-color: #2196f3; box-shadow: 0 0 6px rgba(33, 150, 243, 0.3); }
.pet-item.quality-legendary { border-color: #ff9800; box-shadow: 0 0 8px rgba(255, 152, 0, 0.4); }
.pet-item.quality-myth { border-color: #e91e63; box-shadow: 0 0 10px rgba(233, 30, 99, 0.5); }

.pet-item-icon { font-size: 36px; margin-bottom: 4px; }
.pet-item-name { font-size: 14px; font-weight: bold; margin-bottom: 2px; }
.pet-item-quality { font-size: 11px; margin-bottom: 4px; }
.pet-item-price { font-size: 11px; color: #bf360c; }
.pet-item-level { font-size: 12px; color: #87ceeb; font-weight: bold; }

.pet-item-badge {
    position: absolute;
    top: 4px; right: 4px;
    background: #4caf50;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: bold;
}

.pet-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: #666;
}
.pet-empty-icon { font-size: 48px; margin-bottom: 10px; opacity: 0.5; }
.pet-empty-text { font-size: 14px; }

/* 右侧详情面板 */
.pet-detail-panel {
    width: 240px;
    background: linear-gradient(180deg, rgba(40, 30, 20, 0.9) 0%, rgba(25, 18, 12, 0.95) 100%);
    border: 1px solid rgba(201, 169, 110, 0.4);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.pet-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(69, 90, 100, 0.2);
}

.pet-detail-icon {
    width: 56px; height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 2px solid #555;
}
.pet-detail-icon.quality-common { border-color: #9e9e9e; }
.pet-detail-icon.quality-rare { border-color: #4caf50; }
.pet-detail-icon.quality-epic { border-color: #2196f3; }
.pet-detail-icon.quality-legendary { border-color: #ff9800; }
.pet-detail-icon.quality-myth { border-color: #e91e63; }

.pet-detail-title h3 { margin: 0; font-size: 16px; }
.pet-detail-quality { font-size: 12px; margin-top: 2px; }

.pet-detail-desc {
    font-size: 12px;
    color: #b0a090;
    line-height: 1.6;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.pet-detail-stats-title {
    font-size: 13px;
    color: #00838f;
    font-weight: bold;
    margin-bottom: 6px;
    text-align: center;
}

.pet-detail-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    font-size: 13px;
}
.pet-stat-label { color: #a08060; }
.pet-stat-value { color: #f0d9a8; font-weight: bold; }

.pet-detail-level {
    display: flex;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    color: #87ceeb;
    padding: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.pet-detail-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pet-action-btn {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.pet-action-btn.buy {
    background: linear-gradient(180deg, #455a64 0%, #00838f 100%);
    border-color: #f0d9a8;
    color: #2a1f0f;
}
.pet-action-btn.buy:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(201, 169, 110, 0.4); }
.pet-action-btn.buy.disabled {
    background: #555;
    border-color: #666;
    color: #888;
    cursor: not-allowed;
}
.pet-action-btn.equip {
    background: linear-gradient(180deg, #2e7d32 0%, #4caf50 100%);
    border-color: #81c784;
    color: white;
}
.pet-action-btn.equip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4); }
.pet-action-btn.equipped {
    background: #555;
    border-color: #666;
    color: #aaa;
    cursor: not-allowed;
}

.pet-detail-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
}
.pet-detail-empty-icon { font-size: 48px; margin-bottom: 10px; opacity: 0.4; }
.pet-detail-empty-text { font-size: 13px; }

/* ===== 坐骑系统弹窗（御兽棚） ===== */
.mount-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    opacity: 1 !important;
}

.mount-modal {
    width: 900px;
    max-width: 95vw;
    height: 620px;
    max-height: 92vh;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(201, 169, 110, 0.4), 0 20px 60px rgba(0, 0, 0, 0.6);
    border: 2px solid #c9a96e;
    display: flex;
    flex-direction: column;
    opacity: 1 !important;
    transform: none !important;
}

.mount-modal-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('../assets/img/bg-mount.jpg') center/cover no-repeat;
    z-index: 0;
}

.mount-modal-bg::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(20, 15, 10, 0.85) 0%, rgba(30, 22, 15, 0.9) 50%, rgba(20, 15, 10, 0.92) 100%);
}

.mount-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: linear-gradient(180deg, rgba(40, 30, 20, 0.95) 0%, rgba(30, 22, 15, 0.85) 100%);
    border-bottom: 2px solid #c9a96e;
}

.mount-title-area {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mount-title-plaque {
    background: linear-gradient(180deg, #455a64 0%, #00838f 50%, #455a64 100%);
    padding: 4px 20px;
    border-radius: 4px;
    border: 1px solid #f0d9a8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.mount-title-text {
    font-size: 20px;
    font-weight: bold;
    color: #2a1f0f;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    letter-spacing: 2px;
}

.mount-subtitle {
    font-size: 11px;
    color: #00838f;
    font-style: italic;
    margin-left: 8px;
}

.mount-currencies {
    display: flex;
    gap: 12px;
}

.mount-currency {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid rgba(201, 169, 110, 0.4);
}

.mount-currency-icon { font-size: 14px; }
.mount-currency-value { color: #f0d9a8; font-weight: bold; font-size: 14px; }
.mount-currency.gold .mount-currency-value { color: #bf360c; }
.mount-currency.ingot .mount-currency-value { color: #ffb347; }
.mount-currency.spirit .mount-currency-value { color: #87ceeb; }

.mount-close-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, #8b3a3a 0%, #5c2020 100%);
    border: 1px solid #c9a96e;
    color: #f0d9a8;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.mount-close-btn:hover { background: linear-gradient(180deg, #a04040 0%, #6c2525 100%); transform: scale(1.1); }

.mount-tabs {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 4px;
    padding: 8px 20px 0;
    background: rgba(30, 22, 15, 0.7);
}

.mount-tab {
    padding: 8px 20px;
    background: rgba(40, 30, 20, 0.6);
    border: 1px solid rgba(69, 90, 100, 0.2);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    color: #a08060;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}
.mount-tab:hover { color: #f0d9a8; background: rgba(60, 45, 30, 0.8); }
.mount-tab.active {
    background: linear-gradient(180deg, rgba(60, 45, 30, 0.95) 0%, rgba(40, 30, 20, 0.95) 100%);
    color: #f0d9a8;
    border-color: #c9a96e;
    font-weight: bold;
}

.mount-body {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    overflow: hidden;
    padding: 12px;
    gap: 12px;
}

/* 左侧分类栏 */
.mount-sidebar {
    width: 130px;
    background: rgba(20, 15, 10, 0.7);
    border: 1px solid rgba(69, 90, 100, 0.2);
    border-radius: 8px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mount-sidebar-title {
    text-align: center;
    color: #00838f;
    font-size: 13px;
    font-weight: bold;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(69, 90, 100, 0.2);
    margin-bottom: 4px;
}

.mount-sidebar-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #a08060;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    text-align: left;
}
.mount-sidebar-item:hover { background: rgba(69, 90, 100, 0.1); color: #f0d9a8; }
.mount-sidebar-item.active {
    background: linear-gradient(90deg, rgba(69, 90, 100, 0.2) 0%, transparent 100%);
    border-color: #c9a96e;
    color: #f0d9a8;
    font-weight: bold;
}

.mount-sidebar-icon { font-size: 14px; }

/* 中间网格 */
.mount-grid-area {
    flex: 1;
    overflow-y: auto;
    background: rgba(20, 15, 10, 0.5);
    border: 1px solid rgba(69, 90, 100, 0.2);
    border-radius: 8px;
    padding: 12px;
}

.mount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.mount-item {
    background: linear-gradient(180deg, rgba(40, 30, 20, 0.9) 0%, rgba(25, 18, 12, 0.95) 100%);
    border: 2px solid #555;
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.mount-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
.mount-item.selected { border-color: #f0d9a8; box-shadow: 0 0 12px rgba(240, 217, 168, 0.5); }
.mount-item.equipped { border-color: #4caf50; }

.mount-item.quality-common { border-color: #9e9e9e; }
.mount-item.quality-rare { border-color: #4caf50; box-shadow: 0 0 6px rgba(76, 175, 80, 0.3); }
.mount-item.quality-epic { border-color: #2196f3; box-shadow: 0 0 6px rgba(33, 150, 243, 0.3); }
.mount-item.quality-legendary { border-color: #ff9800; box-shadow: 0 0 8px rgba(255, 152, 0, 0.4); }
.mount-item.quality-myth { border-color: #e91e63; box-shadow: 0 0 10px rgba(233, 30, 99, 0.5); }

.mount-item-icon { font-size: 36px; margin-bottom: 4px; }
.mount-item-name { font-size: 14px; font-weight: bold; margin-bottom: 2px; }
.mount-item-quality { font-size: 11px; margin-bottom: 4px; }
.mount-item-price { font-size: 11px; color: #bf360c; }
.mount-item-level { font-size: 12px; color: #87ceeb; font-weight: bold; }

.mount-item-badge {
    position: absolute;
    top: 4px; right: 4px;
    background: #4caf50;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: bold;
}

.mount-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: #666;
}
.mount-empty-icon { font-size: 48px; margin-bottom: 10px; opacity: 0.5; }
.mount-empty-text { font-size: 14px; }

/* 右侧详情面板 */
.mount-detail-panel {
    width: 240px;
    background: linear-gradient(180deg, rgba(40, 30, 20, 0.9) 0%, rgba(25, 18, 12, 0.95) 100%);
    border: 1px solid rgba(201, 169, 110, 0.4);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.mount-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(69, 90, 100, 0.2);
}

.mount-detail-icon {
    width: 56px; height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 2px solid #555;
}
.mount-detail-icon.quality-common { border-color: #9e9e9e; }
.mount-detail-icon.quality-rare { border-color: #4caf50; }
.mount-detail-icon.quality-epic { border-color: #2196f3; }
.mount-detail-icon.quality-legendary { border-color: #ff9800; }
.mount-detail-icon.quality-myth { border-color: #e91e63; }

.mount-detail-title h3 { margin: 0; font-size: 16px; }
.mount-detail-quality { font-size: 12px; margin-top: 2px; }

.mount-detail-desc {
    font-size: 12px;
    color: #b0a090;
    line-height: 1.6;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.mount-detail-stats-title {
    font-size: 13px;
    color: #00838f;
    font-weight: bold;
    margin-bottom: 6px;
    text-align: center;
}

.mount-detail-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    font-size: 13px;
}
.mount-stat-label { color: #a08060; }
.mount-stat-value { color: #f0d9a8; font-weight: bold; }

.mount-detail-level {
    display: flex;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    color: #87ceeb;
    padding: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.mount-detail-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mount-action-btn {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.mount-action-btn.buy {
    background: linear-gradient(180deg, #455a64 0%, #00838f 100%);
    border-color: #f0d9a8;
    color: #2a1f0f;
}
.mount-action-btn.buy:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(201, 169, 110, 0.4); }
.mount-action-btn.buy.disabled {
    background: #555;
    border-color: #666;
    color: #888;
    cursor: not-allowed;
}
.mount-action-btn.equip {
    background: linear-gradient(180deg, #2e7d32 0%, #4caf50 100%);
    border-color: #81c784;
    color: white;
}
.mount-action-btn.equip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4); }
.mount-action-btn.equipped {
    background: #555;
    border-color: #666;
    color: #aaa;
    cursor: not-allowed;
}
.mount-action-btn.upgrade {
    background: linear-gradient(180deg, #1565c0 0%, #42a5f5 100%);
    border-color: #90caf9;
    color: white;
}
.mount-action-btn.upgrade:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4); }

.mount-detail-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
}
.mount-detail-empty-icon { font-size: 48px; margin-bottom: 10px; opacity: 0.4; }
.mount-detail-empty-text { font-size: 13px; }


/* ===== 宠物/坐骑图片图标样式 ===== */
.pet-item-icon img,
.mount-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.pet-item-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

.mount-item-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

.pet-detail-icon img,
.mount-detail-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.pet-detail-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.mount-detail-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}


/* ===== 修炼弹窗（三栏布局）===== */
.cultivation-modal-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;
    opacity: 1 !important;
}

.cultivation-modal {
    width: 960px;
    max-width: 95vw;
    height: 640px;
    max-height: 92vh;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(69, 90, 100, 0.3), 0 20px 60px rgba(0, 0, 0, 0.7);
    border: 2px solid #c9a96e;
    display: flex;
    flex-direction: column;
    opacity: 1 !important;
}

.cultivation-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('../assets/img/bg-cultivation.jpg') center/cover no-repeat;
    z-index: 0;
}

.cultivation-bg-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(20,15,30,0.85) 0%, rgba(30,20,40,0.75) 50%, rgba(20,15,30,0.85) 100%);
    z-index: 1;
}

/* 顶部标题 */
.cultivation-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: linear-gradient(180deg, rgba(40,30,20,0.9), rgba(30,20,15,0.7));
    border-bottom: 1px solid rgba(201, 169, 110, 0.4);
}

.cultivation-title-block {
    display: flex;
    flex-direction: column;
}

.cultivation-title {
    margin: 0;
    font-size: 22px;
    color: #f0d68a;
    text-shadow: 0 0 10px rgba(240, 214, 138, 0.5);
    letter-spacing: 2px;
}

.cultivation-subtitle {
    font-size: 12px;
    color: #a89070;
    margin-top: 2px;
}

.cultivation-currency {
    display: flex;
    gap: 15px;
}

.cult-currency-item {
    font-size: 14px;
    color: #f0d68a;
    background: rgba(0,0,0,0.4);
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid rgba(69, 90, 100, 0.2);
}

.cultivation-close {
    background: rgba(180, 60, 60, 0.8);
    color: #fff;
    border: 1px solid #c9a96e;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.cultivation-close:hover {
    background: rgba(220, 80, 80, 0.9);
    transform: scale(1.1);
}

/* 主体三栏 */
.cultivation-body {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* 左侧境界列表 */
.cultivation-left {
    width: 180px;
    padding: 15px 12px;
    background: rgba(0, 0, 0, 0.4);
    border-right: 1px solid rgba(69, 90, 100, 0.2);
    overflow-y: auto;
}

.cult-panel-title {
    font-size: 15px;
    color: #f0d68a;
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(69, 90, 100, 0.2);
    letter-spacing: 1px;
}

.realm-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.realm-group-item {
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.realm-group-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.realm-group-item.active {
    background: rgba(69, 90, 100, 0.1);
    border-color: rgba(69, 90, 100, 0.3);
}

.realm-group-name {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 6px;
}

.realm-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.realm-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #555;
    background: #333;
    transition: all 0.2s;
}

.realm-dot.completed {
    background: #4caf50;
    border-color: #4caf50;
}

.realm-dot.current {
    background: #fff;
    animation: pulse 1.5s infinite;
}

.realm-dot.locked {
    background: #2a2a2a;
    border-color: #444;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

/* 中央打坐区 */
.cultivation-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 20px;
    position: relative;
}

.cult-realm-plaque {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 24px;
    background: linear-gradient(180deg, rgba(60,45,25,0.9), rgba(40,30,15,0.9));
    border: 2px solid;
    border-radius: 20px;
    margin-bottom: 10px;
    box-shadow: 0 0 15px rgba(69, 90, 100, 0.2);
}

.plaque-realm {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
}

.plaque-stage {
    font-size: 14px;
    color: #d0c0a0;
}

.cult-meditation-area {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
}

.cult-magic-circle {
    position: absolute;
    width: 180px;
    height: 180px;
    border: 2px solid rgba(64, 224, 208, 0.4);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(64, 224, 208, 0.1) 0%, transparent 70%);
}

.cult-magic-circle.rotating {
    animation: rotate 8s linear infinite;
    border-color: rgba(64, 224, 208, 0.8);
    box-shadow: 0 0 30px rgba(64, 224, 208, 0.4);
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cult-qi-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.qi-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #40e0d0, transparent);
    border-radius: 50%;
    opacity: 0;
}

.qi-particle.p1 { top: 10%; left: 50%; animation: floatUp 3s infinite 0s; }
.qi-particle.p2 { top: 30%; left: 20%; animation: floatUp 3s infinite 0.5s; }
.qi-particle.p3 { top: 50%; left: 80%; animation: floatUp 3s infinite 1s; }
.qi-particle.p4 { top: 70%; left: 30%; animation: floatUp 3s infinite 1.5s; }
.qi-particle.p5 { top: 20%; left: 70%; animation: floatUp 3s infinite 2s; }

@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 0.5; }
    100% { transform: translateY(-60px) scale(0.5); opacity: 0; }
}

.cult-meditation-img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 0 10px rgba(64, 224, 208, 0.5));
}

/* 修为进度 */
.cult-progress-section {
    width: 100%;
    max-width: 360px;
    margin-top: 8px;
}

.cult-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #d0c0a0;
    margin-bottom: 6px;
}

.cult-break-rate {
    color: #ff9800;
}

.cult-progress-bar {
    position: relative;
    height: 22px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(69, 90, 100, 0.3);
    border-radius: 11px;
    overflow: hidden;
}

.cult-progress-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(64, 224, 208, 0.5);
}

.cult-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    font-weight: bold;
}

/* 功能按钮 */
.cult-action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 15px;
}

.cult-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: bold;
    letter-spacing: 1px;
}

.cult-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cult-btn-primary {
    background: linear-gradient(180deg, #4a8c7a, #3a6c5e);
    color: #fff;
    border: 1px solid #5aac8e;
    box-shadow: 0 0 10px rgba(74, 140, 122, 0.4);
}

.cult-btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #5aac8e, #4a8c7a);
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(74, 140, 122, 0.6);
}

.cult-btn-primary.active {
    animation: btnPulse 1s infinite;
}

.cult-btn-gold {
    background: linear-gradient(180deg, #00838f, #a8894e);
    color: #2a1f10;
    border: 1px solid #e0c98e;
    box-shadow: 0 0 10px rgba(201, 169, 110, 0.4);
}

.cult-btn-gold:hover:not(:disabled) {
    background: linear-gradient(180deg, #e0c98e, #00838f);
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(201, 169, 110, 0.6);
}

.cult-btn-gold.active {
    animation: btnPulse 1s infinite;
}

@keyframes btnPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }
    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.8); }
}

.cult-break-result {
    margin-top: 12px;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

.cult-break-result.success {
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
    border: 1px solid #4caf50;
}

.cult-break-result.fail {
    background: rgba(244, 67, 54, 0.2);
    color: #ef9a9a;
    border: 1px solid #f44336;
}

/* 右侧属性面板 */
.cultivation-right {
    width: 220px;
    padding: 15px 12px;
    background: rgba(0, 0, 0, 0.4);
    border-left: 1px solid rgba(69, 90, 100, 0.2);
    overflow-y: auto;
}

.cult-stats-panel {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 15px;
}

.cult-current-realm-label {
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.cult-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
}

.cult-stat-label {
    color: #b0a090;
}

.cult-stat-value {
    color: #f0d68a;
    font-weight: bold;
}

.cult-stat-next {
    color: #81c784;
    font-size: 11px;
    margin-left: 4px;
}

.cult-break-condition {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px;
}

.condition-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.condition-label {
    color: #a09080;
}

.condition-value {
    color: #d0c0a0;
}

.condition-value.met {
    color: #81c784;
    font-weight: bold;
}

.condition-tip {
    margin-top: 10px;
    padding: 8px;
    background: rgba(64, 224, 208, 0.1);
    border-radius: 6px;
    font-size: 11px;
    color: #80cbc4;
    line-height: 1.5;
}

.cult-btn-gold:hover:not(:disabled) {
  background: linear-gradient(135deg, #bf360c, #ff8c00);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5);
}

.cult-btn-auto {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid #4a9eff;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(74, 158, 255, 0.15), rgba(74, 158, 255, 0.05));
  color: #4a9eff;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.cult-btn-auto:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(74, 158, 255, 0.3), rgba(74, 158, 255, 0.1));
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(74, 158, 255, 0.4);
}

.cult-btn-auto.active {
  background: linear-gradient(135deg, #4a9eff, #2196f3);
  color: #fff;
  border-color: #4a9eff;
  animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(74, 158, 255, 0.5); }
  50% { box-shadow: 0 0 20px rgba(74, 158, 255, 0.8); }
}

.cult-btn-auto:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cult-auto-hint {
  margin-top: 10px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 140, 0, 0.1));
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 6px;
  color: #bf360c;
  font-size: 13px;
  text-align: center;
  animation: hint-pulse 2s ease-in-out infinite;
}

@keyframes hint-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* ===== 修炼弹窗优化样式 ===== */
.cult-main-btn-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.cult-btn-large {
  flex: 1;
  padding: 12px 16px;
  font-size: 15px;
}

.cult-btn-full {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
}

.cult-btn-gold.glow {
  animation: gold-glow 1.5s ease-in-out infinite;
}

@keyframes gold-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
  50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.9), 0 0 50px rgba(255, 215, 0, 0.4); }
}

/* 飘字特效 */
.cult-float-text {
  position: absolute;
  top: 30%;
  color: #40e0d0;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(64, 224, 208, 0.8), 0 0 20px rgba(64, 224, 208, 0.4);
  animation: float-up 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 10;
}

@keyframes float-up {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-30px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.8); }
}

/* 修炼统计 */
.cult-stats-box {
  margin-top: 16px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(255, 215, 0, 0.2);
}

.cult-stat-mini-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12px;
  color: #ccc;
}

.cult-stat-mini-val {
  color: #bf360c;
  font-weight: bold;
}

/* 修炼日志 */
.cult-log-box {
  margin-top: 12px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(255, 215, 0, 0.15);
  max-height: 120px;
  overflow-y: auto;
}

.cult-log-title {
  font-size: 12px;
  color: #bf360c;
  margin-bottom: 6px;
  font-weight: bold;
}

.cult-log-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cult-log-item {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: #aaa;
}

.cult-log-time {
  color: #888;
  flex-shrink: 0;
}

.cult-log-text {
  color: #40e0d0;
}

.cult-log-empty {
  font-size: 11px;
  color: #666;
  text-align: center;
  padding: 8px 0;
}

/* 突破结果优化 */
.break-result-content {
  text-align: center;
  padding: 8px;
}

.break-result-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
}

.cult-break-result.success .break-result-title {
  color: #bf360c;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.cult-break-result.fail .break-result-title {
  color: #ff6b6b;
}

.break-result-realm {
  font-size: 14px;
  color: #40e0d0;
  margin-bottom: 6px;
}

.break-result-stats {
  font-size: 12px;
  color: #ccc;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.break-result-desc {
  font-size: 13px;
  color: #aaa;
}

/* 修炼日志滚动条 */
.cult-log-box::-webkit-scrollbar {
  width: 4px;
}

.cult-log-box::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.cult-log-box::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.3);
  border-radius: 2px;
}

/* ===== 宗门弹窗升级版样式 ===== */
.sect-modal-v2 {
  width: 900px !important;
  max-width: 95vw;
  height: 600px;
  max-height: 90vh;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #2c1810 0%, #1a0f0a 100%) !important;
  border: 2px solid #b8860b !important;
  border-radius: 8px;
  box-shadow: 0 0 40px rgba(184, 134, 11, 0.3), inset 0 0 60px rgba(0,0,0,0.5);
  overflow: hidden;
}

.sect-modal-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/img/sect/bg-sect.jpg') center/cover;
  opacity: 0.15;
  pointer-events: none;
}

/* 顶部宗门信息栏 */
.sect-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: linear-gradient(180deg, rgba(184,134,11,0.2) 0%, transparent 100%);
  border-bottom: 1px solid rgba(184,134,11,0.3);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.sect-top-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sect-top-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  border: 2px solid #daa520;
  box-shadow: 0 0 15px rgba(218,165,32,0.5);
}

.sect-top-info {
  display: flex;
  flex-direction: column;
}

.sect-top-name {
  font-size: 20px;
  font-weight: bold;
  color: #daa520;
  font-family: var(--font-title);
  letter-spacing: 2px;
}

.sect-top-sub {
  font-size: 12px;
  color: #ccc;
  display: flex;
  gap: 8px;
}

.sect-top-resources {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sect-res-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.sect-res-label {
  font-size: 11px;
  color: #999;
}

.sect-res-value {
  font-size: 14px;
  color: #daa520;
  font-weight: bold;
}

.sect-exp-bar-wrap {
  min-width: 120px;
}

.sect-exp-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}

.sect-exp-fill {
  height: 100%;
  background: linear-gradient(90deg, #b8860b, #daa520);
  border-radius: 3px;
  transition: width 0.3s;
}

/* 主体内容 */
.sect-main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* 左侧导航 */
.sect-sidebar {
  width: 140px;
  background: rgba(0,0,0,0.3);
  border-right: 1px solid rgba(184,134,11,0.2);
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.sect-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  color: #aaa;
  font-size: 13px;
  transition: all 0.2s;
  border-left: 3px solid transparent;
}

.sect-nav-item:hover {
  background: rgba(184,134,11,0.1);
  color: #daa520;
}

.sect-nav-item.active {
  background: linear-gradient(90deg, rgba(184,134,11,0.2) 0%, transparent 100%);
  color: #daa520;
  border-left-color: #daa520;
}

.sect-nav-icon {
  font-size: 16px;
}

.sect-leave-item {
  margin-top: auto;
  color: #c23a2b !important;
}

.sect-leave-item:hover {
  background: rgba(194,58,43,0.1) !important;
}

/* 右侧内容区 */
.sect-content-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.sect-content-area::-webkit-scrollbar {
  width: 6px;
}

.sect-content-area::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
}

.sect-content-area::-webkit-scrollbar-thumb {
  background: rgba(184,134,11,0.5);
  border-radius: 3px;
}

/* 宗门大厅 */
.sect-hall-v2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sect-notice-v2 {
  background: rgba(184,134,11,0.1);
  border: 1px solid rgba(184,134,11,0.3);
  border-radius: 6px;
  padding: 12px 16px;
}

.sect-notice-title-v2 {
  font-size: 14px;
  color: #daa520;
  font-weight: bold;
  margin-bottom: 6px;
}

.sect-notice-content-v2 {
  font-size: 13px;
  color: #ddd;
  line-height: 1.6;
}

/* 每日祈福 */
.sect-bless-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(184,134,11,0.15) 0%, rgba(194,58,43,0.1) 100%);
  border: 1px solid rgba(184,134,11,0.4);
  border-radius: 8px;
  padding: 14px 20px;
}

.sect-bless-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sect-bless-title {
  font-size: 15px;
  color: #daa520;
  font-weight: bold;
}

.sect-bless-desc {
  font-size: 12px;
  color: #aaa;
}

.sect-bless-btn {
  padding: 8px 24px;
  background: linear-gradient(180deg, #daa520 0%, #b8860b 100%);
  color: #1a0f0a;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.sect-bless-btn:hover:not(.disabled) {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(218,165,32,0.5);
}

.sect-bless-btn.disabled {
  background: #555;
  color: #888;
  cursor: not-allowed;
}

/* 宗门建筑 */
.sect-buildings-title {
  font-size: 15px;
  color: #daa520;
  font-weight: bold;
  margin-bottom: 8px;
}

.sect-buildings-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.sect-building-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(184,134,11,0.2);
  border-radius: 6px;
  padding: 10px;
  text-align: center;
  transition: all 0.2s;
  cursor: pointer;
}

.sect-building-card:hover {
  border-color: rgba(184,134,11,0.6);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.sect-building-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-bottom: 6px;
}

.sect-building-name {
  font-size: 12px;
  color: #ddd;
  font-weight: bold;
  margin-bottom: 2px;
}

.sect-building-level {
  font-size: 11px;
  color: #daa520;
}

.sect-building-desc {
  font-size: 10px;
  color: #888;
  margin-top: 4px;
  line-height: 1.3;
}

/* 宗门加成 */
.sect-bonus-v2 {
  background: rgba(76,175,80,0.1);
  border: 1px solid rgba(76,175,80,0.3);
  border-radius: 6px;
  padding: 12px 16px;
}

.sect-bonus-title-v2 {
  font-size: 14px;
  color: #4caf50;
  font-weight: bold;
  margin-bottom: 8px;
}

.sect-bonus-list-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sect-bonus-item-v2 {
  background: rgba(76,175,80,0.15);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #81c784;
}

/* 宗门武学 */
.sect-skills-v2 {
  background: rgba(33,150,243,0.1);
  border: 1px solid rgba(33,150,243,0.3);
  border-radius: 6px;
  padding: 12px 16px;
}

.sect-skills-title-v2 {
  font-size: 14px;
  color: #2196f3;
  font-weight: bold;
  margin-bottom: 8px;
}

.sect-skills-list-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sect-skill-item-v2 {
  background: rgba(33,150,243,0.15);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  color: #64b5f6;
}

/* 成员管理 */
.sect-members-v2 {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sect-members-header-v2 {
  display: flex;
  padding: 10px 12px;
  background: rgba(184,134,11,0.15);
  border-bottom: 1px solid rgba(184,134,11,0.3);
  font-size: 12px;
  color: #daa520;
  font-weight: bold;
}

.member-col-avatar { width: 40px; text-align: center; }
.member-col-name-v2 { flex: 1; }
.member-col-pos-v2 { width: 80px; text-align: center; }
.member-col-level-v2 { width: 60px; text-align: center; }
.member-col-contr-v2 { width: 70px; text-align: center; }
.member-col-status-v2 { width: 50px; text-align: center; }

.sect-members-list-v2 {
  max-height: 400px;
  overflow-y: auto;
}

.sect-member-row-v2 {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 12px;
  color: #ccc;
  transition: background 0.2s;
}

.sect-member-row-v2:hover {
  background: rgba(255,255,255,0.05);
}

.member-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  font-weight: bold;
}

.member-col-status-v2.online { color: #4caf50; }
.member-col-status-v2.offline { color: #888; }

/* 宗门商店 */
.sect-shop-v2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sect-shop-header-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.sect-shop-contribution {
  font-size: 14px;
  color: #ddd;
}

.contribution-value {
  color: #daa520;
  font-weight: bold;
  font-size: 16px;
}

.sect-shop-categories {
  display: flex;
  gap: 6px;
}

.shop-cat-btn {
  padding: 5px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(184,134,11,0.2);
  color: #aaa;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.shop-cat-btn:hover {
  border-color: rgba(184,134,11,0.5);
  color: #daa520;
}

.shop-cat-btn.active {
  background: rgba(184,134,11,0.2);
  border-color: #daa520;
  color: #daa520;
}

.sect-shop-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.sect-shop-item-v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid;
  border-radius: 6px;
  padding: 10px;
  transition: all 0.2s;
}

.sect-shop-item-v2:hover {
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}

.shop-item-icon-v2 {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-item-icon-v2 img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.shop-item-info-v2 {
  flex: 1;
  min-width: 0;
}

.shop-item-name-v2 {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 2px;
}

.shop-item-desc-v2 {
  font-size: 11px;
  color: #999;
  margin-bottom: 2px;
}

.shop-item-limit {
  font-size: 10px;
  color: #888;
}

.shop-item-buy-v2 {
  padding: 6px 12px;
  background: linear-gradient(180deg, #daa520 0%, #b8860b 100%);
  color: #1a0f0a;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.shop-item-buy-v2:hover:not(.disabled) {
  box-shadow: 0 0 10px rgba(218,165,32,0.4);
}

.shop-item-buy-v2.disabled {
  background: #555;
  color: #888;
  cursor: not-allowed;
}

/* 宗门任务 */
.sect-quest-v2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quest-tabs-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(184,134,11,0.2);
}

.quest-tab-title {
  font-size: 14px;
  color: #daa520;
  font-weight: bold;
}

.quest-tab-hint {
  font-size: 11px;
  color: #888;
}

.sect-quest-item-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(184,134,11,0.2);
  border-radius: 6px;
  padding: 12px;
  gap: 12px;
}

.quest-info-v2 {
  flex: 1;
}

.quest-name-v2 {
  font-size: 13px;
  color: #ddd;
  font-weight: bold;
  margin-bottom: 4px;
}

.quest-desc-v2 {
  font-size: 11px;
  color: #999;
  margin-bottom: 6px;
}

.quest-progress-v2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.quest-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
  max-width: 150px;
}

.quest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #81c784);
  border-radius: 3px;
  transition: width 0.3s;
}

.quest-progress-v2 span {
  font-size: 11px;
  color: #aaa;
}

.quest-reward-v2 {
  font-size: 11px;
  color: #daa520;
}

.quest-action-v2 {
  flex-shrink: 0;
}

.quest-btn {
  padding: 6px 16px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.quest-btn.accept {
  background: linear-gradient(180deg, #2196f3, #1976d2);
  color: #fff;
}

.quest-btn.complete {
  background: linear-gradient(180deg, #ff9800, #f57c00);
  color: #fff;
}

.quest-btn.claim {
  background: linear-gradient(180deg, #4caf50, #388e3c);
  color: #fff;
  animation: pulse 1.5s infinite;
}

.quest-claimed {
  font-size: 12px;
  color: #666;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76,175,80,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(76,175,80,0); }
}

/* 宗门技能 */
.sect-skills-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sect-skills-panel-title {
  font-size: 16px;
  color: #daa520;
  font-weight: bold;
}

.sect-skills-panel-desc {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}

.sect-skills-list-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.sect-skill-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(184,134,11,0.2);
  border-radius: 6px;
  padding: 12px;
}

.skill-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.skill-card-name {
  font-size: 14px;
  color: #daa520;
  font-weight: bold;
}

.skill-card-level {
  font-size: 12px;
  color: #888;
}

.skill-card-desc {
  font-size: 11px;
  color: #aaa;
  margin-bottom: 8px;
}

.skill-card-progress {
  margin-bottom: 10px;
}

.skill-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}

.skill-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #9c27b0, #ba68c8);
  border-radius: 3px;
}

.skill-upgrade-btn {
  width: 100%;
  padding: 6px;
  background: linear-gradient(180deg, #9c27b0, #7b1fa2);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.skill-upgrade-btn:hover:not(.disabled) {
  box-shadow: 0 0 10px rgba(156,39,176,0.4);
}

.skill-upgrade-btn.disabled {
  background: #555;
  color: #888;
  cursor: not-allowed;
}

/* 升级门槛提示（人物等级/修为/金币不足） */
.skill-upgrade-need {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}
.skill-upgrade-need .need-row {
  font-size: 11px;
  color: #f87171;
  text-align: center;
  background: rgba(248,113,113,0.12);
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: 4px;
  padding: 3px 6px;
  line-height: 1.4;
}

/* 宗门活动 */
.sect-events-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sect-events-title {
  font-size: 16px;
  color: #daa520;
  font-weight: bold;
}

.sect-events-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sect-event-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(184,134,11,0.2);
  border-radius: 6px;
  padding: 14px;
}

.sect-event-card.open {
  border-color: rgba(76,175,80,0.4);
}

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

.event-card-name {
  font-size: 15px;
  color: #ddd;
  font-weight: bold;
}

.event-card-status {
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
}

.event-card-status.open {
  background: rgba(76,175,80,0.2);
  color: #4caf50;
}

.event-card-status.closed {
  background: rgba(150,150,150,0.2);
  color: #999;
}

.event-card-desc {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 8px;
  line-height: 1.5;
}

.event-card-reward {
  font-size: 12px;
  color: #daa520;
  margin-bottom: 10px;
}

.event-join-btn {
  width: 100%;
  padding: 8px;
  background: linear-gradient(180deg, #c23a2b, #a02a1d);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.event-join-btn:hover:not(.disabled) {
  box-shadow: 0 0 15px rgba(194,58,43,0.4);
}

.event-join-btn.disabled {
  background: #555;
  color: #888;
  cursor: not-allowed;
}

/* ===== 选择宗门界面美化 ===== */
.sect-select-modal {
  width: 850px !important;
  max-width: 95vw;
  background: linear-gradient(180deg, #2c1810 0%, #1a0f0a 100%) !important;
  border: 2px solid #b8860b !important;
  border-radius: 12px !important;
  box-shadow: 0 0 50px rgba(184, 134, 11, 0.4), inset 0 0 80px rgba(0,0,0,0.5) !important;
  position: relative;
  overflow: hidden;
}

.sect-select-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/img/sect/bg-sect.jpg') center/cover;
  opacity: 0.12;
  pointer-events: none;
}

.sect-select-modal .sect-header {
  position: relative;
  z-index: 1;
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid rgba(184,134,11,0.3);
  background: linear-gradient(180deg, rgba(184,134,11,0.15) 0%, transparent 100%);
}

.sect-select-modal .sect-header h2 {
  color: #daa520 !important;
  font-size: 28px !important;
  font-family: var(--font-title);
  letter-spacing: 4px;
  text-shadow: 0 0 20px rgba(218,165,32,0.5);
  margin: 0;
}

.sect-select-modal .sect-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(194,58,43,0.8);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
}

.sect-select-modal .sect-close:hover {
  background: #c23a2b;
  transform: scale(1.1);
}

.sect-select-body {
  position: relative;
  z-index: 1;
  padding: 24px;
}

.sect-select-desc {
  text-align: center;
  color: #e0d5c1 !important;
  font-size: 15px !important;
  margin-bottom: 24px !important;
  padding: 14px 20px !important;
  background: linear-gradient(135deg, rgba(184,134,11,0.15) 0%, rgba(194,58,43,0.1) 100%) !important;
  border: 1px solid rgba(184,134,11,0.3) !important;
  border-radius: 8px !important;
  line-height: 1.6;
}

.sect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

.sect-card {
  padding: 20px 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.3) 100%) !important;
  border: 2px solid rgba(184,134,11,0.3) !important;
  border-radius: 10px !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sect-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--card-accent, #b8860b), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.sect-card:hover {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px var(--card-accent, rgba(184,134,11,0.3)) !important;
  border-color: var(--card-accent, #daa520) !important;
}

.sect-card:hover::before {
  opacity: 1;
}

.sect-card.selected {
  border-color: #bf360c !important;
  background: linear-gradient(180deg, rgba(255,215,0,0.15) 0%, rgba(255,215,0,0.05) 100%) !important;
  box-shadow: 0 0 30px rgba(255,215,0,0.4), inset 0 0 20px rgba(255,215,0,0.1) !important;
  transform: translateY(-3px);
}

.sect-card.selected::before {
  opacity: 1;
  background: linear-gradient(90deg, transparent, #bf360c, transparent);
}

.sect-card-badge {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 14px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  font-weight: bold !important;
  color: white !important;
  border: 3px solid rgba(255,255,255,0.4) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 0 2px 10px rgba(255,255,255,0.2) !important;
  position: relative;
}

.sect-card-badge::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
}

.sect-card-name {
  color: #bf360c !important;
  font-size: 18px !important;
  font-weight: bold !important;
  margin-bottom: 8px !important;
  font-family: var(--font-title);
  letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.sect-card-master {
  color: #ccc !important;
  font-size: 12px !important;
  margin-bottom: 4px !important;
}

.sect-card-members {
  color: #999 !important;
  font-size: 12px !important;
  margin-bottom: 10px !important;
}

.sect-card-desc {
  color: #aaa !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.sect-select-action {
  text-align: center;
  position: relative;
  z-index: 1;
}

.sect-join-btn {
  padding: 14px 50px !important;
  background: linear-gradient(180deg, #daa520 0%, #b8860b 50%, #455a64 100%) !important;
  color: #1a0f0a !important;
  border: 2px solid #bf360c !important;
  border-radius: 8px !important;
  font-size: 18px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
  letter-spacing: 4px;
  font-family: var(--font-title);
  box-shadow: 0 4px 15px rgba(218,165,32,0.4), inset 0 1px 0 rgba(255,255,255,0.3) !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.3);
}

.sect-join-btn:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 8px 25px rgba(218,165,32,0.6), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

.sect-join-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

/* ===== 选择宗门界面 V2（左右分栏布局） ===== */
.sect-select-modal-v2 {
  width: 950px !important;
  max-width: 95vw;
  max-height: 85vh;
  background: linear-gradient(180deg, #2c1810 0%, #1a0f0a 100%) !important;
  border: 2px solid #b8860b !important;
  border-radius: 12px !important;
  box-shadow: 0 0 50px rgba(184, 134, 11, 0.4), inset 0 0 80px rgba(0,0,0,0.5) !important;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sect-select-modal-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/img/sect/bg-sect.jpg') center/cover;
  opacity: 0.08;
  pointer-events: none;
}

.sect-select-body-v2 {
  display: flex;
  gap: 0;
  flex: 1;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* 左侧：宗门列表 */
.sect-select-list {
  width: 240px;
  background: rgba(0,0,0,0.4);
  border-right: 1px solid rgba(184,134,11,0.3);
  padding: 16px 12px;
  overflow-y: auto;
  flex-shrink: 0;
}

.sect-list-title {
  text-align: center;
  color: #daa520;
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(184,134,11,0.3);
  letter-spacing: 4px;
  font-family: var(--font-title);
}

.sect-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.sect-list-item:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--accent-color, #b8860b);
  transform: translateX(4px);
}

.sect-list-item.active {
  background: linear-gradient(90deg, rgba(255,215,0,0.15) 0%, transparent 100%);
  border-color: #bf360c;
  box-shadow: 0 0 15px rgba(255,215,0,0.2);
}

.sect-list-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: linear-gradient(180deg, #bf360c, #b8860b);
  border-radius: 0 2px 2px 0;
}

.sect-list-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: white;
  border: 2px solid rgba(255,255,255,0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  flex-shrink: 0;
}

.sect-list-info {
  flex: 1;
  min-width: 0;
}

.sect-list-name {
  color: #bf360c;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 2px;
  font-family: var(--font-title);
}

.sect-list-master {
  color: #999;
  font-size: 11px;
}

/* 右侧：宗门详情 */
.sect-select-detail {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sect-detail-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

/* 宗门场景大图 */
.sect-scene-image {
  width: 100%;
  height: 220px;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(184,134,11,0.4);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  flex-shrink: 0;
}

.sect-scene-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.8) 100%);
}

.sect-scene-title {
  position: absolute;
  bottom: 16px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.sect-scene-name {
  color: #bf360c;
  font-size: 28px;
  font-weight: bold;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8), 0 0 20px rgba(255,215,0,0.3);
  font-family: var(--font-title);
  letter-spacing: 4px;
}

.sect-scene-location {
  color: #ccc;
  font-size: 13px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* 宗门详细信息 */
.sect-detail-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sect-detail-row {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  border-left: 3px solid rgba(184,134,11,0.5);
}

.sect-detail-label {
  width: 80px;
  color: #b8860b;
  font-size: 13px;
  font-weight: bold;
}

.sect-detail-value {
  color: #e0d5c1;
  font-size: 14px;
}

.sect-detail-desc, .sect-detail-features {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(184,134,11,0.2);
  border-radius: 8px;
  padding: 12px 16px;
}

.sect-detail-desc-title {
  color: #daa520;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
  letter-spacing: 2px;
}

.sect-detail-desc-text {
  color: #bbb;
  font-size: 13px;
  line-height: 1.7;
}

.sect-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.sect-feature-tag {
  padding: 4px 12px;
  border: 1px solid;
  border-radius: 12px;
  font-size: 12px;
  background: rgba(255,255,255,0.05);
}

/* 加入按钮 */
.sect-select-action-v2 {
  text-align: center;
  padding-top: 8px;
  flex-shrink: 0;
}

.sect-join-btn-v2 {
  padding: 14px 60px;
  color: #1a0f0a;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 4px;
  font-family: var(--font-title);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
  text-shadow: 0 1px 2px rgba(255,255,255,0.3);
}

.sect-join-btn-v2:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 25px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}

.sect-join-btn-v2:active {
  transform: translateY(0) scale(0.98);
}

/* 占位符 */
.sect-detail-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #666;
}

.sect-placeholder-icon {
  font-size: 64px;
  opacity: 0.3;
}

.sect-placeholder-text {
  font-size: 18px;
  color: #888;
}

.sect-placeholder-sub {
  font-size: 13px;
  color: #666;
}

/* ===== 宗门弹窗对比度优化 ===== */
/* 降低背景图透明度 */
.sect-modal-v2::before {
  opacity: 0.08 !important;
}

/* 内容区域增加深色背景 */
.sect-content-area {
  background: rgba(20, 12, 8, 0.7) !important;
  backdrop-filter: blur(2px);
}

/* 建筑卡片增强背景和文字对比度 */
.sect-building-card {
  background: linear-gradient(180deg, rgba(40, 25, 15, 0.9) 0%, rgba(25, 15, 10, 0.95) 100%) !important;
  border: 1px solid rgba(184, 134, 11, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sect-building-card:hover {
  background: linear-gradient(180deg, rgba(50, 35, 20, 0.95) 0%, rgba(35, 22, 15, 0.98) 100%) !important;
  border-color: rgba(218, 165, 32, 0.8) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(218, 165, 32, 0.2) !important;
}

.sect-building-name {
  color: #f0e6d2 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.sect-building-level {
  color: #bf360c !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.sect-building-desc {
  color: #b8a88a !important;
}

/* 公告区域增强 */
.sect-notice-v2 {
  background: linear-gradient(135deg, rgba(194, 58, 43, 0.2) 0%, rgba(184, 134, 11, 0.15) 100%) !important;
  border: 1px solid rgba(194, 58, 43, 0.4) !important;
}

.sect-notice-title-v2 {
  color: #ff8a65 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.sect-notice-text-v2 {
  color: #e0d5c1 !important;
}

/* 宗门加成区域增强 */
.sect-bonus-v2 {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(20, 12, 8, 0.8) 100%) !important;
  border: 1px solid rgba(76, 175, 80, 0.4) !important;
}

.sect-bonus-title-v2 {
  color: #81c784 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.sect-bonus-item-v2 {
  background: rgba(76, 175, 80, 0.25) !important;
  color: #a5d6a7 !important;
}

/* 宗门武学区域增强 */
.sect-skills-v2 {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.15) 0%, rgba(20, 12, 8, 0.8) 100%) !important;
  border: 1px solid rgba(33, 150, 243, 0.4) !important;
}

.sect-skills-title-v2 {
  color: #64b5f6 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.sect-skill-item-v2 {
  background: rgba(33, 150, 243, 0.25) !important;
  color: #90caf9 !important;
}

/* 商店商品增强背景 */
.sect-shop-item-v2 {
  background: linear-gradient(180deg, rgba(40, 25, 15, 0.9) 0%, rgba(25, 15, 10, 0.95) 100%) !important;
  border: 1px solid rgba(184, 134, 11, 0.3) !important;
}

.sect-shop-item-v2:hover {
  background: linear-gradient(180deg, rgba(50, 35, 20, 0.95) 0%, rgba(35, 22, 15, 0.98) 100%) !important;
  border-color: rgba(218, 165, 32, 0.7) !important;
}

.sect-shop-item-name {
  color: #f0e6d2 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.sect-shop-item-desc {
  color: #b8a88a !important;
}

.sect-shop-item-price {
  color: #bf360c !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* 任务区域增强 */
.sect-quest-item-v2 {
  background: linear-gradient(180deg, rgba(40, 25, 15, 0.85) 0%, rgba(25, 15, 10, 0.9) 100%) !important;
  border: 1px solid rgba(184, 134, 11, 0.3) !important;
}

.sect-quest-title-v2 {
  color: #f0e6d2 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.sect-quest-desc-v2 {
  color: #b8a88a !important;
}

.sect-quest-progress-text-v2 {
  color: #daa520 !important;
}

/* 技能卡片增强 */
.sect-skill-card {
  background: linear-gradient(180deg, rgba(40, 25, 15, 0.9) 0%, rgba(25, 15, 10, 0.95) 100%) !important;
  border: 1px solid rgba(184, 134, 11, 0.3) !important;
}

.sect-skill-name {
  color: #f0e6d2 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.sect-skill-desc {
  color: #b8a88a !important;
}

/* 活动卡片增强 */
.sect-event-card {
  background: linear-gradient(180deg, rgba(40, 25, 15, 0.9) 0%, rgba(25, 15, 10, 0.95) 100%) !important;
  border: 1px solid rgba(184, 134, 11, 0.3) !important;
}

.sect-event-name {
  color: #f0e6d2 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.sect-event-desc {
  color: #b8a88a !important;
}

/* 成员列表增强 */
.sect-member-row-v2 {
  background: rgba(40, 25, 15, 0.7) !important;
  border-bottom: 1px solid rgba(184, 134, 11, 0.15) !important;
}

.sect-member-row-v2:hover {
  background: rgba(50, 35, 20, 0.85) !important;
}

.sect-member-name-v2 {
  color: #f0e6d2 !important;
}

.sect-member-position-v2 {
  color: #daa520 !important;
}

.sect-member-level-v2 {
  color: #b8a88a !important;
}

/* 顶部信息栏文字增强 */
.sect-top-name {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}

.sect-top-sub {
  color: #d4c4a8 !important;
}

.sect-res-label {
  color: #b8a88a !important;
}

.sect-res-value {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* 左侧导航文字增强 */
.sect-nav-item {
  color: #c0b090 !important;
}

.sect-nav-item:hover {
  color: #bf360c !important;
}

.sect-nav-item.active {
  color: #bf360c !important;
}

/* 标题文字通用增强 */
.sect-buildings-title,
.sect-shop-header-v2,
.sect-quest-header-v2,
.sect-skills-header,
.sect-events-header {
  color: #daa520 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* 商店贡献值显示 */
.sect-shop-contribution {
  color: #e0d5c1 !important;
}

.contribution-value {
  color: #bf360c !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* 分类按钮 */
.shop-cat-btn {
  color: #c0b090 !important;
  background: rgba(40, 25, 15, 0.6) !important;
  border: 1px solid rgba(184, 134, 11, 0.3) !important;
}

.shop-cat-btn.active {
  color: #1a0f0a !important;
  background: linear-gradient(180deg, #daa520 0%, #b8860b 100%) !important;
  border-color: #bf360c !important;
}

/* 确保游戏界面占满视口 */
.game-page {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  z-index: 100 !important;
}

/* ===== 聊天区域滚动条修复（flex布局正确版） ===== */
.game-page {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.game-page > * {
  min-height: 0 !important;
  flex-shrink: 0;
}

.game-main {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
}

.game-main > * {
  min-height: 0 !important;
}

.chat-container {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.chat-container > * {
  min-height: 0 !important;
  flex-shrink: 0;
}

.chat-messages {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  justify-content: flex-start !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(139, 115, 85, 0.6) rgba(139, 115, 85, 0.1) !important;
}

.chat-messages::-webkit-scrollbar {
  width: 8px !important;
}

.chat-messages::-webkit-scrollbar-track {
  background: rgba(139, 115, 85, 0.1) !important;
  border-radius: 4px !important;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(139, 115, 85, 0.6) !important;
  border-radius: 4px !important;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 115, 85, 0.8) !important;
}

/* 聊天频道标签不收缩 */
.chat-channels {
  flex-shrink: 0 !important;
}

/* 聊天输入区不收缩 */
.chat-input-area {
  flex-shrink: 0 !important;
}

/* ===== 左侧栏滚动条美化（与聊天区域一致） ===== */
.sidebar-panel {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(139, 115, 85, 0.6) rgba(139, 115, 85, 0.1) !important;
}

.sidebar-panel::-webkit-scrollbar {
  width: 8px !important;
}

.sidebar-panel::-webkit-scrollbar-track {
  background: rgba(139, 115, 85, 0.1) !important;
  border-radius: 4px !important;
}

.sidebar-panel::-webkit-scrollbar-thumb {
  background: rgba(139, 115, 85, 0.6) !important;
  border-radius: 4px !important;
}

.sidebar-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 115, 85, 0.8) !important;
}

/* ===== 隐藏属性折叠面板优化 ===== */
.hidden-stats-panel {
  margin-top: 12px;
  padding: 0;
  background: linear-gradient(180deg, rgba(40, 25, 15, 0.9) 0%, rgba(25, 15, 10, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hidden-stats-title {
  font-size: 13px;
  color: #bf360c;
  padding: 10px 12px;
  letter-spacing: 2px;
  text-align: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.15) 0%, transparent 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  transition: all 0.3s;
  user-select: none;
}

.hidden-stats-title:hover {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.25) 0%, transparent 100%);
}

.hidden-stats-toggle {
  font-size: 10px;
  color: #b8860b;
  transition: transform 0.3s;
}

.hidden-stats-content {
  padding: 10px 12px;
}

/* 折叠状态摘要 */
.hidden-stats-summary {
  display: flex;
  justify-content: space-around;
  padding: 10px 12px;
  gap: 8px;
}

.hidden-stats-summary-item {
  font-size: 12px;
  color: #e0d5c1;
  cursor: help;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  transition: all 0.2s;
}

.hidden-stats-summary-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

/* 属性项优化 */
.hidden-stat-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border-left: 3px solid transparent;
  transition: all 0.2s;
}

.hidden-stat-item:last-child {
  margin-bottom: 0;
}

.hidden-stat-item.luck {
  border-left-color: rgba(34, 197, 94, 0.6);
}

.hidden-stat-item.fortune {
  border-left-color: rgba(234, 179, 8, 0.6);
}

.hidden-stat-item.mood {
  border-left-color: rgba(236, 72, 153, 0.6);
}

.hidden-stat-item:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(2px);
}

.hidden-stat-icon {
  font-size: 20px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  flex-shrink: 0;
}

.hidden-stat-info {
  flex: 1;
  min-width: 0;
}

.hidden-stat-name {
  font-size: 12px;
  color: #e0d5c1;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.hidden-stat-value {
  color: #bf360c;
  font-weight: bold;
  font-size: 13px;
}

/* 属性等级评价 */
.hidden-stat-level {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: bold;
}

.hidden-stat-level.level-超凡 {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: #fff;
  box-shadow: 0 0 8px rgba(255, 107, 107, 0.5);
}

.hidden-stat-level.level-深厚 {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
}

.hidden-stat-level.level-普通 {
  background: linear-gradient(135deg, #eab308, #ca8a04);
  color: #fff;
}

.hidden-stat-level.level-浅薄 {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: #fff;
}

.hidden-stat-bar {
  height: 8px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}

.hidden-stat-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
  box-shadow: 0 0 6px currentColor;
}

.hidden-stat-fill.luck {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.hidden-stat-fill.fortune {
  background: linear-gradient(90deg, #eab308, #facc15);
}

.hidden-stat-fill.mood {
  background: linear-gradient(90deg, #ec4899, #f472b6);
}

.hidden-stat-desc {
  font-size: 10px;
  color: #8b7d6b;
  line-height: 1.4;
}

/* ===== 顶部锻造铺按钮 ===== */
.forge-top-btn {
  background: linear-gradient(180deg, #8b4513 0%, #654321 100%) !important;
  border-color: #daa520 !important;
}

.forge-top-btn:hover {
  background: linear-gradient(180deg, #a0522d 0%, #8b4513 100%) !important;
  box-shadow: 0 0 12px rgba(218, 165, 32, 0.5) !important;
  transform: translateY(-1px);
}

.forge-top-btn .shop-seal-small {
  color: #bf360c !important;
  text-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
}

/* ===== 聊天栏升级版样式 ===== */
.chat-upgraded {
  position: relative;
}

/* 频道栏优化 */
.chat-upgraded .chat-channels {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  background: linear-gradient(180deg, rgba(40, 25, 15, 0.95) 0%, rgba(30, 20, 12, 0.9) 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  flex-shrink: 0;
}

.chat-upgraded .chat-channel {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  font-size: 11px;
  color: #8b7d6b;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.chat-upgraded .chat-channel:hover {
  color: #e0d5c1;
  background: rgba(255, 255, 255, 0.05);
}

.chat-upgraded .chat-channel.active {
  color: #bf360c;
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.4);
}

.chat-upgraded .channel-icon {
  font-size: 12px;
}

.chat-upgraded .channel-name {
  font-size: 11px;
}

.chat-upgraded .channel-unread {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.chat-upgraded .chat-settings-btn {
  margin-left: auto;
  padding: 4px 8px;
  font-size: 14px;
  color: #8b7d6b;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-upgraded .chat-settings-btn:hover {
  color: #bf360c;
  transform: rotate(45deg);
}

/* 聊天设置面板 */
.chat-settings-panel {
  position: absolute;
  top: 40px;
  right: 8px;
  width: 220px;
  background: linear-gradient(180deg, rgba(40, 25, 15, 0.98) 0%, rgba(25, 15, 10, 0.99) 100%);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 8px;
  padding: 12px;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.chat-settings-title {
  font-size: 14px;
  color: #bf360c;
  text-align: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.chat-settings-group {
  margin-bottom: 10px;
}

.settings-group-title {
  font-size: 11px;
  color: #b8860b;
  margin-bottom: 6px;
}

.settings-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #e0d5c1;
  cursor: pointer;
  padding: 3px 0;
}

.settings-checkbox input {
  cursor: pointer;
}

.settings-font-size {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #e0d5c1;
  margin-top: 6px;
}

.font-size-btn {
  padding: 2px 8px;
  font-size: 11px;
  color: #8b7d6b;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}

.font-size-btn:hover {
  color: #e0d5c1;
}

.font-size-btn.active {
  color: #bf360c;
  background: rgba(212, 175, 55, 0.2);
  border-color: rgba(212, 175, 55, 0.5);
}

.chat-settings-actions {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.settings-clear-btn {
  width: 100%;
  padding: 6px;
  font-size: 12px;
  color: #f87171;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.settings-clear-btn:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* 系统消息样式 */
.chat-upgraded .system-msg {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 8px;
  margin: 2px 0;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.chat-upgraded .system-icon {
  font-size: 13px;
}

.chat-upgraded .system-prefix {
  font-weight: bold;
}

.chat-upgraded .system-content {
  flex: 1;
}

.chat-upgraded .system-time {
  font-size: 10px;
  color: #6b5d4b;
  margin-left: auto;
}

/* 玩家消息门派标识 */
.chat-upgraded .chat-msg-sect {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 4px;
}

.chat-upgraded .chat-msg-sect.sect-shaolin { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.chat-upgraded .chat-msg-sect.sect-wudang { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
.chat-upgraded .chat-msg-sect.sect-emei { background: rgba(236, 72, 153, 0.2); color: #f9a8d4; }
.chat-upgraded .chat-msg-sect.sect-huashan { background: rgba(34, 197, 94, 0.2); color: #86efac; }
.chat-upgraded .chat-msg-sect.sect-gaibang { background: rgba(234, 179, 8, 0.2); color: #fde047; }
.chat-upgraded .chat-msg-sect.sect-tangmen { background: rgba(168, 85, 247, 0.2); color: #d8b4fe; }
.chat-upgraded .chat-msg-sect.sect-default { background: rgba(139, 115, 85, 0.2); color: #d4af37; }

.chat-upgraded .chat-msg-title {
  font-size: 10px;
  color: #bf360c;
  margin-left: 4px;
  font-style: italic;
}

/* 快捷功能栏 */
.chat-upgraded .chat-quick-bar {
  position: relative;
  padding: 4px 8px;
  background: rgba(30, 20, 12, 0.8);
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  flex-shrink: 0;
}

.chat-upgraded .quick-bar-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-upgraded .quick-bar-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-upgraded .quick-bar-btn:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.5);
  transform: translateY(-1px);
}

.chat-upgraded .quick-bar-btn.active {
  background: rgba(212, 175, 55, 0.25);
  border-color: rgba(212, 175, 55, 0.6);
}

/* 快捷面板 */
.chat-upgraded .quick-panel {
  position: absolute;
  bottom: 40px;
  left: 8px;
  width: 280px;
  max-height: 200px;
  background: linear-gradient(180deg, rgba(40, 25, 15, 0.98) 0%, rgba(25, 15, 10, 0.99) 100%);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 8px;
  padding: 10px;
  z-index: 50;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}

.chat-upgraded .quick-panel-title {
  font-size: 12px;
  color: #bf360c;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

/* 表情面板 */
.chat-upgraded .emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.chat-upgraded .emoji-item {
  padding: 6px;
  font-size: 16px;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-upgraded .emoji-item:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.4);
  transform: scale(1.1);
}

/* 常用语面板 */
.chat-upgraded .phrases-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-upgraded .phrase-item {
  padding: 6px 10px;
  font-size: 12px;
  color: #e0d5c1;
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-upgraded .phrase-item:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.4);
  color: #bf360c;
}

/* 动作面板 */
.chat-upgraded .actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.chat-upgraded .action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-upgraded .action-item:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-2px);
}

.chat-upgraded .action-icon {
  font-size: 20px;
}

.chat-upgraded .action-name {
  font-size: 10px;
  color: #e0d5c1;
}

/* 玩家互动菜单 */
.player-context-menu {
  position: fixed;
  width: 160px;
  background: linear-gradient(180deg, rgba(40, 25, 15, 0.98) 0%, rgba(25, 15, 10, 0.99) 100%);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 8px;
  padding: 8px;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.player-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 4px;
}

.player-menu-name {
  font-size: 13px;
  color: #bf360c;
  font-weight: bold;
}

.player-menu-level {
  font-size: 11px;
  color: #e0d5c1;
}

.player-menu-item {
  display: block;
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  color: #e0d5c1;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.player-menu-item:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #bf360c;
}

.player-menu-item.danger {
  color: #f87171;
}

.player-menu-item.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* 空消息提示 */
.chat-upgraded .chat-empty {
  text-align: center;
  color: #6b5d4b;
  font-size: 13px;
  padding: 40px 20px;
  font-style: italic;
}

/* 字体大小 */
.chat-upgraded.font-small .chat-msg-bubble,
.chat-upgraded.font-small .system-content,
.chat-upgraded.font-small .rumor {
  font-size: 11px;
}

.chat-upgraded.font-large .chat-msg-bubble,
.chat-upgraded.font-large .system-content,
.chat-upgraded.font-large .rumor {
  font-size: 14px;
}

/* 传闻消息优化 */
.chat-upgraded .rumor {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  margin: 4px 0;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, transparent 100%);
  border-left: 3px solid rgba(212, 175, 55, 0.5);
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  color: #d4af37;
}

.chat-upgraded .rumor-icon {
  font-size: 14px;
}

.chat-upgraded .rumor-prefix {
  color: #bf360c;
  font-weight: bold;
}

/* 事件消息优化 */
.chat-upgraded .event-msg {
  margin: 8px 0;
}

.chat-upgraded .event-chosen {
  margin-top: 8px;
  font-size: 12px;
  color: #bf360c;
  font-style: italic;
}

/* ===== 聊天栏精美版样式 ===== */
.chat-premium {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(20, 12, 8, 0.95) 0%, rgba(15, 10, 6, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  overflow: hidden;
}

/* 顶部装饰条 */
.chat-premium .chat-top-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.05) 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  position: relative;
  flex-shrink: 0;
}

.chat-premium .decoration-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(212, 175, 55, 0.6);
}

.chat-premium .decoration-corner.left {
  left: 6px;
  top: 4px;
  border-right: none;
  border-bottom: none;
  border-radius: 4px 0 0 0;
}

.chat-premium .decoration-corner.right {
  right: 6px;
  top: 4px;
  border-left: none;
  border-bottom: none;
  border-radius: 0 4px 0 0;
}

.chat-premium .decoration-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-premium .title-left,
.chat-premium .title-right {
  color: rgba(212, 175, 55, 0.6);
  font-size: 12px;
}

.chat-premium .title-text {
  color: #bf360c;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 4px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* 频道栏精美版 */
.chat-premium .chat-channels-premium {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  background: linear-gradient(180deg, rgba(40, 25, 15, 0.9) 0%, rgba(30, 20, 12, 0.85) 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  flex-shrink: 0;
}

.chat-premium .chat-channel-premium {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  min-width: 42px;
}

.chat-premium .chat-channel-premium:hover {
  background: rgba(212, 175, 55, 0.1);
  transform: translateY(-1px);
}

.chat-premium .chat-channel-premium.active {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.1) 100%);
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.3), inset 0 0 8px rgba(212, 175, 55, 0.1);
}

.chat-premium .channel-icon-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.chat-premium .chat-channel-premium.active .channel-icon-img {
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
}

.chat-premium .channel-name-text {
  font-size: 10px;
  color: #8b7d6b;
  transition: color 0.3s;
}

.chat-premium .chat-channel-premium:hover .channel-name-text,
.chat-premium .chat-channel-premium.active .channel-name-text {
  color: #bf360c;
}

.chat-premium .channel-active-glow {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #bf360c, transparent);
  border-radius: 1px;
}

.chat-premium .channel-unread-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}

.chat-premium .chat-settings-btn-premium {
  margin-left: auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 6px;
}

.chat-premium .chat-settings-btn-premium:hover {
  background: rgba(212, 175, 55, 0.15);
  transform: rotate(45deg);
}

.chat-premium .settings-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* 设置面板精美版 */
.chat-premium .chat-settings-panel-premium {
  position: absolute;
  top: 60px;
  right: 8px;
  width: 220px;
  background: linear-gradient(180deg, rgba(40, 25, 15, 0.98) 0%, rgba(25, 15, 10, 0.99) 100%);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 8px;
  padding: 12px;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 20px rgba(212, 175, 55, 0.1);
}

.chat-premium .settings-panel-header {
  text-align: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.chat-premium .settings-panel-title {
  color: #bf360c;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
}

/* 消息区精美版 */
.chat-premium .chat-messages-premium {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.4) rgba(212, 175, 55, 0.1);
}

.chat-premium .chat-messages-premium::-webkit-scrollbar {
  width: 6px;
}

.chat-premium .chat-messages-premium::-webkit-scrollbar-track {
  background: rgba(212, 175, 55, 0.05);
}

.chat-premium .chat-messages-premium::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.4);
  border-radius: 3px;
}

.chat-premium .messages-bg-texture {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(212, 175, 55, 0.02) 0%, transparent 50%);
  pointer-events: none;
}

.chat-premium .msg-wrapper {
  position: relative;
  z-index: 1;
}

/* 空消息 */
.chat-premium .chat-empty-premium {
  text-align: center;
  padding: 60px 20px;
  color: #6b5d4b;
}

.chat-premium .empty-icon {
  font-size: 40px;
  margin-bottom: 10px;
  opacity: 0.5;
}

.chat-premium .empty-text {
  font-size: 13px;
  font-style: italic;
  letter-spacing: 2px;
}

/* 系统消息精美版 */
.chat-premium .system-msg-premium {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px 10px;
  margin: 3px 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
  border-left: 2px solid rgba(212, 175, 55, 0.4);
  border-radius: 0 4px 4px 0;
  font-size: 12px;
}

.chat-premium .system-icon-premium {
  font-size: 13px;
}

.chat-premium .system-prefix-premium {
  font-weight: bold;
}

.chat-premium .system-content-premium {
  flex: 1;
}

.chat-premium .system-time-premium {
  font-size: 10px;
  color: #6b5d4b;
  margin-left: auto;
}

/* 传闻消息精美版 */
.chat-premium .rumor-msg-premium {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  margin: 6px 0;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0.02) 100%);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.chat-premium .rumor-left-border {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #bf360c, #b8860b);
}

.chat-premium .rumor-icon-premium {
  font-size: 16px;
  flex-shrink: 0;
}

.chat-premium .rumor-content {
  flex: 1;
  font-size: 12px;
  color: #d4af37;
  line-height: 1.6;
}

.chat-premium .rumor-prefix-premium {
  color: #bf360c;
  font-weight: bold;
}

/* 玩家消息精美版 */
.chat-premium .player-msg-premium {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}

.chat-premium .player-msg-premium.self {
  flex-direction: row-reverse;
}

.chat-premium .player-avatar-premium {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  cursor: pointer;
}

.chat-premium .player-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(212, 175, 55, 0.5);
  background-image: url('assets/img/avatars.png');
  background-size: 200% 100%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.chat-premium .avatar-level-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #bf360c, #b8860b);
  color: #1a0f08;
  font-size: 9px;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 6px;
  white-space: nowrap;
}

.chat-premium .player-msg-body {
  flex: 1;
  min-width: 0;
}

.chat-premium .player-meta-premium {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  font-size: 11px;
}

.chat-premium .player-msg-premium.self .player-meta-premium {
  justify-content: flex-end;
}

.chat-premium .player-name-premium {
  color: #bf360c;
  font-weight: bold;
  cursor: pointer;
}

.chat-premium .player-name-premium:hover {
  text-decoration: underline;
}

.chat-premium .player-sect-premium {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
}

.chat-premium .player-sect-premium.sect-shaolin { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.chat-premium .player-sect-premium.sect-wudang { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
.chat-premium .player-sect-premium.sect-emei { background: rgba(236, 72, 153, 0.2); color: #f9a8d4; }
.chat-premium .player-sect-premium.sect-huashan { background: rgba(34, 197, 94, 0.2); color: #86efac; }
.chat-premium .player-sect-premium.sect-gaibang { background: rgba(234, 179, 8, 0.2); color: #fde047; }
.chat-premium .player-sect-premium.sect-tangmen { background: rgba(168, 85, 247, 0.2); color: #d8b4fe; }
.chat-premium .player-sect-premium.sect-default { background: rgba(139, 115, 85, 0.2); color: #d4af37; }

.chat-premium .player-title-premium {
  font-size: 10px;
  color: #bf360c;
  font-style: italic;
}

.chat-premium .player-time-premium {
  color: #6b5d4b;
  font-size: 10px;
}

/* 气泡精美版 */
.chat-premium .player-bubble-premium {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(60, 40, 25, 0.9) 0%, rgba(45, 30, 18, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  font-size: 13px;
  color: #e0d5c1;
  line-height: 1.6;
  word-break: break-word;
}

.chat-premium .player-msg-premium.self .player-bubble-premium {
  background: linear-gradient(135deg, rgba(80, 50, 30, 0.9) 0%, rgba(60, 38, 22, 0.95) 100%);
  border-color: rgba(255, 215, 0, 0.4);
}

.chat-premium .bubble-corner {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(212, 175, 55, 0.5);
}

.chat-premium .bubble-corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; }
.chat-premium .bubble-corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; border-radius: 0 4px 0 0; }
.chat-premium .bubble-corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; border-radius: 0 0 0 4px; }
.chat-premium .bubble-corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; border-radius: 0 0 4px 0; }

/* 事件消息精美版 */
.chat-premium .event-msg-premium {
  margin: 10px 0;
}

.chat-premium .event-bubble-premium {
  padding: 12px;
  background: linear-gradient(135deg, rgba(80, 50, 20, 0.9) 0%, rgba(50, 30, 15, 0.95) 100%);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.15);
}

.chat-premium .event-title-premium {
  color: #bf360c;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 2px;
}

.chat-premium .event-choices-premium {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.chat-premium .event-choice-btn-premium {
  flex: 1;
  min-width: 100px;
  padding: 6px 12px;
  font-size: 12px;
  color: #e0d5c1;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.1) 100%);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-premium .event-choice-btn-premium:hover {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.35) 0%, rgba(212, 175, 55, 0.2) 100%);
  color: #bf360c;
  transform: translateY(-1px);
}

.chat-premium .event-chosen-premium {
  margin-top: 8px;
  font-size: 12px;
  color: #bf360c;
  font-style: italic;
  text-align: center;
}

/* 快捷栏精美版 */
.chat-premium .chat-quick-bar-premium {
  position: relative;
  padding: 6px 8px;
  background: linear-gradient(180deg, rgba(30, 20, 12, 0.9) 0%, rgba(25, 15, 10, 0.95) 100%);
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  flex-shrink: 0;
}

.chat-premium .quick-bar-left {
  display: flex;
  gap: 4px;
}

.chat-premium .quick-bar-right {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.chat-premium .quick-btn-premium {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.chat-premium .quick-btn-premium:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
}

.chat-premium .quick-btn-premium.active {
  background: rgba(212, 175, 55, 0.25);
  border-color: rgba(212, 175, 55, 0.6);
}

.chat-premium .quick-btn-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* 快捷面板精美版 */
.chat-premium .quick-panel-premium {
  position: absolute;
  bottom: 42px;
  left: 8px;
  width: 280px;
  max-height: 220px;
  background: linear-gradient(180deg, rgba(40, 25, 15, 0.98) 0%, rgba(25, 15, 10, 0.99) 100%);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 8px;
  padding: 10px;
  z-index: 50;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(212, 175, 55, 0.1);
  overflow-y: auto;
}

.chat-premium .quick-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  font-size: 12px;
  color: #bf360c;
}

.chat-premium .panel-close-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #8b7d6b;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
}

.chat-premium .panel-close-btn:hover {
  color: #bf360c;
  background: rgba(255, 255, 255, 0.05);
}

.chat-premium .emoji-grid-premium {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.chat-premium .emoji-item-premium {
  padding: 6px;
  font-size: 16px;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-premium .emoji-item-premium:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.4);
  transform: scale(1.15);
}

.chat-premium .phrases-list-premium {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-premium .phrase-item-premium {
  padding: 6px 10px;
  font-size: 12px;
  color: #e0d5c1;
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-premium .phrase-item-premium:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.4);
  color: #bf360c;
}

.chat-premium .actions-grid-premium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.chat-premium .action-item-premium {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-premium .action-item-premium:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-2px);
}

.chat-premium .action-icon-premium {
  font-size: 20px;
}

.chat-premium .action-name-premium {
  font-size: 10px;
  color: #e0d5c1;
}

/* 输入区精美版 */
.chat-premium .chat-input-area-premium {
  padding: 8px;
  background: linear-gradient(180deg, rgba(25, 15, 10, 0.95) 0%, rgba(20, 12, 8, 0.98) 100%);
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  flex-shrink: 0;
}

.chat-premium .input-wrapper-premium {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.chat-premium .input-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(212, 175, 55, 0.5);
  pointer-events: none;
  z-index: 1;
}

.chat-premium .input-corner.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; }
.chat-premium .input-corner.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; border-radius: 0 4px 0 0; }
.chat-premium .input-corner.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; border-radius: 0 0 0 4px; }
.chat-premium .input-corner.br { bottom: -2px; right: -2px; border-left: none; border-top: none; border-radius: 0 0 4px 0; }

.chat-premium .chat-input-premium {
  flex: 1;
  min-height: 32px;
  max-height: 80px;
  padding: 6px 10px;
  font-size: 13px;
  color: #e0d5c1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 4px;
  resize: none;
  outline: none;
  font-family: inherit;
}

.chat-premium .chat-input-premium:focus {
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
}

.chat-premium .chat-input-premium::placeholder {
  color: #6b5d4b;
}

.chat-premium .chat-send-btn-premium {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  font-size: 13px;
  color: #1a0f08;
  background: linear-gradient(180deg, #bf360c 0%, #b8860b 100%);
  border: 1px solid #daa520;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
  height: 32px;
}

.chat-premium .chat-send-btn-premium:hover {
  background: linear-gradient(180deg, #ffed4a 0%, #daa520 100%);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
  transform: translateY(-1px);
}

.chat-premium .send-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* 玩家菜单精美版 */
.player-context-menu-premium {
  position: fixed;
  width: 180px;
  background: linear-gradient(180deg, rgba(40, 25, 15, 0.98) 0%, rgba(25, 15, 10, 0.99) 100%);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 8px;
  padding: 8px;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 20px rgba(212, 175, 55, 0.1);
}

.player-menu-header-premium {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  margin-bottom: 6px;
}

.player-menu-header-premium .menu-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #666, #444);
  border: 2px solid rgba(212, 175, 55, 0.5);
}

.player-menu-header-premium .menu-info {
  flex: 1;
}

.player-menu-header-premium .menu-name {
  display: block;
  color: #bf360c;
  font-size: 13px;
  font-weight: bold;
}

.player-menu-header-premium .menu-level {
  font-size: 11px;
  color: #8b7d6b;
}

.player-context-menu-premium .menu-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
  margin: 4px 0;
}

.player-context-menu-premium .player-menu-item-premium {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  color: #e0d5c1;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.player-context-menu-premium .player-menu-item-premium:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #bf360c;
}

.player-context-menu-premium .player-menu-item-premium.danger {
  color: #f87171;
}

.player-context-menu-premium .player-menu-item-premium.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.player-context-menu-premium .menu-item-icon {
  font-size: 14px;
}

/* 字体大小 */
.chat-premium.font-small .player-bubble-premium,
.chat-premium.font-small .system-content-premium,
.chat-premium.font-small .rumor-content {
  font-size: 11px;
}

.chat-premium.font-large .player-bubble-premium,
.chat-premium.font-large .system-content-premium,
.chat-premium.font-large .rumor-content {
  font-size: 15px;
}

/* ===== 聊天栏江湖卷轴风 ===== */
.chat-jianghu {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f5e6c8 0%, #263238 50%, #dcc690 100%);
  border: 3px solid #8b4513;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 0 60px rgba(139, 69, 19, 0.1);
}

/* 背景图 */
.chat-jianghu .jianghu-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  pointer-events: none;
}

/* 挂件装饰 */
.chat-jianghu .decor-lantern {
  position: absolute;
  width: 40px;
  height: 50px;
  object-fit: contain;
  z-index: 5;
  pointer-events: none;
  animation: lanternSwing 3s ease-in-out infinite;
}

.chat-jianghu .decor-lantern.left {
  top: -5px;
  left: 10px;
  transform-origin: top center;
}

.chat-jianghu .decor-lantern.right {
  top: -5px;
  right: 10px;
  transform-origin: top center;
  animation-delay: 1.5s;
}

@keyframes lanternSwing {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

.chat-jianghu .decor-jade {
  position: absolute;
  top: 50px;
  right: 5px;
  width: 30px;
  height: 45px;
  object-fit: contain;
  z-index: 5;
  pointer-events: none;
  opacity: 0.8;
}

.chat-jianghu .decor-knot {
  position: absolute;
  bottom: 80px;
  left: 5px;
  width: 28px;
  height: 40px;
  object-fit: contain;
  z-index: 5;
  pointer-events: none;
  opacity: 0.8;
}

/* 卷轴标题栏 */
.chat-jianghu .jianghu-title-bar {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 2;
}

.chat-jianghu .title-scroll-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 36px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.chat-jianghu .title-text {
  position: relative;
  color: #5d4037;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 8px;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
  z-index: 1;
}

/* 频道栏（印章风格） */
.chat-jianghu .jianghu-channels {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(139, 69, 19, 0.15) 0%, rgba(139, 69, 19, 0.05) 100%);
  border-bottom: 2px solid rgba(139, 69, 19, 0.3);
  flex-shrink: 0;
  z-index: 2;
}

.chat-jianghu .jianghu-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  background: linear-gradient(180deg, #c41e3a 0%, #8b0000 100%);
  border: 2px solid #8b0000;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  min-width: 44px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.chat-jianghu .jianghu-channel:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.chat-jianghu .jianghu-channel.active {
  background: linear-gradient(180deg, #daa520 0%, #b8860b 100%);
  border-color: #455a64;
  box-shadow: 0 0 12px rgba(218, 165, 32, 0.5);
}

.chat-jianghu .channel-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.chat-jianghu .channel-text {
  font-size: 10px;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.chat-jianghu .jianghu-channel.active .channel-text {
  color: #5d4037;
}

.chat-jianghu .jianghu-settings-btn {
  margin-left: auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 69, 19, 0.1);
  border: 1px solid rgba(139, 69, 19, 0.3);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.chat-jianghu .jianghu-settings-btn:hover {
  background: rgba(139, 69, 19, 0.2);
  transform: rotate(45deg);
}

.chat-jianghu .settings-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* 设置面板 */
.chat-jianghu .jianghu-settings-panel {
  position: absolute;
  top: 80px;
  right: 10px;
  width: 200px;
  background: linear-gradient(180deg, #f5e6c8 0%, #263238 100%);
  border: 2px solid #8b4513;
  border-radius: 6px;
  padding: 10px;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.chat-jianghu .settings-header {
  color: #5d4037;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(139, 69, 19, 0.3);
}

.chat-jianghu .settings-group {
  margin-bottom: 8px;
}

.chat-jianghu .group-title {
  font-size: 11px;
  color: #8b4513;
  margin-bottom: 4px;
  font-weight: bold;
}

.chat-jianghu .setting-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #5d4037;
  padding: 2px 0;
  cursor: pointer;
}

.chat-jianghu .font-size-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #5d4037;
}

.chat-jianghu .font-btn {
  padding: 2px 8px;
  font-size: 11px;
  color: #5d4037;
  background: rgba(139, 69, 19, 0.1);
  border: 1px solid rgba(139, 69, 19, 0.3);
  border-radius: 3px;
  cursor: pointer;
}

.chat-jianghu .font-btn.active {
  background: #8b4513;
  color: #f5e6c8;
}

.chat-jianghu .clear-chat-btn {
  width: 100%;
  padding: 5px;
  font-size: 12px;
  color: #c41e3a;
  background: rgba(196, 30, 58, 0.1);
  border: 1px solid rgba(196, 30, 58, 0.3);
  border-radius: 4px;
  cursor: pointer;
  margin-top: 6px;
}

/* 消息区（宣纸风格） */
.chat-jianghu .jianghu-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 14px;
  position: relative;
  z-index: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 69, 19, 0.5) rgba(139, 69, 19, 0.1);
}

.chat-jianghu .jianghu-messages::-webkit-scrollbar {
  width: 8px;
}

.chat-jianghu .jianghu-messages::-webkit-scrollbar-track {
  background: rgba(139, 69, 19, 0.1);
  border-radius: 4px;
}

.chat-jianghu .jianghu-messages::-webkit-scrollbar-thumb {
  background: rgba(139, 69, 19, 0.5);
  border-radius: 4px;
}

.chat-jianghu .jianghu-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 69, 19, 0.7);
}

/* 空消息 */
.chat-jianghu .jianghu-empty {
  text-align: center;
  padding: 50px 20px;
  color: #8b7355;
}

.chat-jianghu .empty-scroll {
  font-size: 40px;
  margin-bottom: 10px;
  opacity: 0.6;
}

.chat-jianghu .empty-text {
  font-size: 14px;
  font-style: italic;
  letter-spacing: 2px;
}

/* 系统消息 */
.chat-jianghu .jianghu-system-msg {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 8px;
  margin: 3px 0;
  background: rgba(255, 255, 255, 0.3);
  border-left: 3px solid #8b4513;
  border-radius: 0 4px 4px 0;
  font-size: 12px;
}

.chat-jianghu .sys-icon { font-size: 13px; }
.chat-jianghu .sys-prefix { font-weight: bold; }
.chat-jianghu .sys-content { flex: 1; }
.chat-jianghu .sys-time { font-size: 10px; color: #8b7355; margin-left: auto; }

/* 传闻消息 */
.chat-jianghu .jianghu-rumor-msg {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 12px;
  margin: 6px 0;
  background: linear-gradient(90deg, rgba(218, 165, 32, 0.2) 0%, rgba(218, 165, 32, 0.05) 100%);
  border: 1px solid rgba(218, 165, 32, 0.4);
  border-radius: 4px;
  font-size: 12px;
  color: #455a64;
}

.chat-jianghu .rumor-icon { font-size: 16px; flex-shrink: 0; }
.chat-jianghu .rumor-prefix { color: #b8860b; font-weight: bold; }
.chat-jianghu .rumor-text { color: #5d4037; }

/* 玩家消息 */
.chat-jianghu .jianghu-player-msg {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}

.chat-jianghu .jianghu-player-msg.self {
  flex-direction: row-reverse;
}

.chat-jianghu .player-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  cursor: pointer;
}

.chat-jianghu .avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #8b4513;
  background-image: url('assets/img/avatars.png');
  background-size: 200% 100%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.chat-jianghu .avatar-level {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #c41e3a, #8b0000);
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 6px;
  white-space: nowrap;
}

.chat-jianghu .player-msg-content {
  flex: 1;
  min-width: 0;
}

.chat-jianghu .player-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  font-size: 11px;
}

.chat-jianghu .jianghu-player-msg.self .player-meta {
  justify-content: flex-end;
}

.chat-jianghu .player-name {
  color: #c41e3a;
  font-weight: bold;
  cursor: pointer;
}

.chat-jianghu .player-name:hover {
  text-decoration: underline;
}

.chat-jianghu .player-sect {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
}

.chat-jianghu .player-sect.sect-shaolin { background: rgba(196, 30, 58, 0.15); color: #8b0000; }
.chat-jianghu .player-sect.sect-wudang { background: rgba(30, 58, 95, 0.15); color: #1e3a5f; }
.chat-jianghu .player-sect.sect-emei { background: rgba(196, 30, 120, 0.15); color: #8b0060; }
.chat-jianghu .player-sect.sect-huashan { background: rgba(34, 139, 34, 0.15); color: #228b22; }
.chat-jianghu .player-sect.sect-gaibang { background: rgba(184, 134, 11, 0.15); color: #455a64; }
.chat-jianghu .player-sect.sect-tangmen { background: rgba(75, 0, 130, 0.15); color: #4b0082; }
.chat-jianghu .player-sect.sect-default { background: rgba(139, 69, 19, 0.15); color: #8b4513; }

.chat-jianghu .player-time {
  color: #8b7355;
  font-size: 10px;
}

/* 消息气泡 */
.chat-jianghu .player-bubble {
  display: inline-block;
  max-width: 100%;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 100%);
  border: 1px solid rgba(139, 69, 19, 0.3);
  border-radius: 8px;
  font-size: 13px;
  color: #3d2817;
  line-height: 1.6;
  word-break: break-word;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.chat-jianghu .jianghu-player-msg.self .player-bubble {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.15) 0%, rgba(30, 58, 95, 0.1) 100%);
  border-color: rgba(30, 58, 95, 0.4);
  color: #1e3a5f;
}

/* 事件消息 */
.chat-jianghu .jianghu-event-msg {
  margin: 10px 0;
}

.chat-jianghu .event-bubble {
  padding: 12px;
  background: linear-gradient(135deg, rgba(218, 165, 32, 0.2) 0%, rgba(218, 165, 32, 0.1) 100%);
  border: 2px solid rgba(218, 165, 32, 0.5);
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(218, 165, 32, 0.2);
}

.chat-jianghu .event-title {
  color: #455a64;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 2px;
}

.chat-jianghu .event-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.chat-jianghu .event-choice {
  flex: 1;
  min-width: 100px;
  padding: 6px 12px;
  font-size: 12px;
  color: #5d4037;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%);
  border: 1px solid rgba(139, 69, 19, 0.4);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-jianghu .event-choice:hover {
  background: linear-gradient(180deg, rgba(218, 165, 32, 0.3) 0%, rgba(218, 165, 32, 0.2) 100%);
  color: #455a64;
  transform: translateY(-1px);
}

.chat-jianghu .event-chosen {
  margin-top: 8px;
  font-size: 12px;
  color: #455a64;
  font-style: italic;
  text-align: center;
}

/* 快捷栏 */
.chat-jianghu .jianghu-quick-bar {
  position: relative;
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(139, 69, 19, 0.1) 0%, rgba(139, 69, 19, 0.05) 100%);
  border-top: 1px solid rgba(139, 69, 19, 0.2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  z-index: 2;
}

.chat-jianghu .quick-buttons {
  display: flex;
  gap: 4px;
}

.chat-jianghu .quick-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(139, 69, 19, 0.3);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.chat-jianghu .quick-btn:hover {
  background: rgba(218, 165, 32, 0.3);
  transform: translateY(-2px);
}

.chat-jianghu .quick-btn.active {
  background: rgba(218, 165, 32, 0.4);
  border-color: rgba(139, 69, 19, 0.5);
}

.chat-jianghu .quick-btn img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.chat-jianghu .quick-skill-bar {
  margin-left: auto;
}

/* 快捷面板 */
.chat-jianghu .quick-panel {
  position: absolute;
  bottom: 42px;
  left: 10px;
  width: 260px;
  max-height: 200px;
  background: linear-gradient(180deg, #f5e6c8 0%, #263238 100%);
  border: 2px solid #8b4513;
  border-radius: 6px;
  padding: 8px;
  z-index: 50;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
}

.chat-jianghu .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(139, 69, 19, 0.2);
  font-size: 12px;
  color: #5d4037;
  font-weight: bold;
}

.chat-jianghu .close-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #8b4513;
  font-size: 16px;
  cursor: pointer;
  border-radius: 3px;
}

.chat-jianghu .close-btn:hover {
  background: rgba(139, 69, 19, 0.1);
}

.chat-jianghu .emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.chat-jianghu .emoji-item {
  padding: 6px;
  font-size: 16px;
  text-align: center;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-jianghu .emoji-item:hover {
  background: rgba(218, 165, 32, 0.3);
  border-color: rgba(139, 69, 19, 0.4);
  transform: scale(1.15);
}

.chat-jianghu .phrases-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-jianghu .phrase-item {
  padding: 6px 10px;
  font-size: 12px;
  color: #5d4037;
  text-align: left;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-jianghu .phrase-item:hover {
  background: rgba(218, 165, 32, 0.3);
  border-color: rgba(139, 69, 19, 0.4);
  color: #455a64;
}

.chat-jianghu .actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.chat-jianghu .action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-jianghu .action-item:hover {
  background: rgba(218, 165, 32, 0.3);
  border-color: rgba(139, 69, 19, 0.4);
  transform: translateY(-2px);
}

.chat-jianghu .action-icon { font-size: 20px; }
.chat-jianghu .action-name { font-size: 10px; color: #5d4037; }

/* 输入区 */
.chat-jianghu .jianghu-input-area {
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(139, 69, 19, 0.15) 0%, rgba(139, 69, 19, 0.1) 100%);
  border-top: 2px solid rgba(139, 69, 19, 0.3);
  flex-shrink: 0;
  z-index: 2;
}

.chat-jianghu .input-wrapper {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.chat-jianghu .jianghu-input {
  flex: 1;
  min-height: 34px;
  max-height: 80px;
  padding: 6px 10px;
  font-size: 13px;
  color: #3d2817;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(139, 69, 19, 0.4);
  border-radius: 6px;
  resize: none;
  outline: none;
  font-family: inherit;
}

.chat-jianghu .jianghu-input:focus {
  border-color: #8b4513;
  box-shadow: 0 0 8px rgba(139, 69, 19, 0.3);
  background: rgba(255, 255, 255, 0.8);
}

.chat-jianghu .jianghu-input::placeholder {
  color: #8b7355;
  font-style: italic;
}

.chat-jianghu .jianghu-send-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(180deg, #c41e3a 0%, #8b0000 100%);
  border: 2px solid #8b0000;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
  height: 34px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.chat-jianghu .jianghu-send-btn:hover {
  background: linear-gradient(180deg, #e63946 0%, #c41e3a 100%);
  box-shadow: 0 4px 10px rgba(196, 30, 58, 0.4);
  transform: translateY(-1px);
}

.chat-jianghu .send-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* 玩家菜单 */
.jianghu-player-menu {
  position: fixed;
  width: 170px;
  background: linear-gradient(180deg, #f5e6c8 0%, #263238 100%);
  border: 2px solid #8b4513;
  border-radius: 6px;
  padding: 8px;
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.jianghu-player-menu .menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
  margin-bottom: 4px;
}

.jianghu-player-menu .menu-name {
  color: #c41e3a;
  font-size: 13px;
  font-weight: bold;
}

.jianghu-player-menu .menu-level {
  font-size: 11px;
  color: #8b7355;
}

.jianghu-player-menu .menu-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 69, 19, 0.3), transparent);
  margin: 4px 0;
}

.jianghu-player-menu .menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  color: #5d4037;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.jianghu-player-menu .menu-item:hover {
  background: rgba(218, 165, 32, 0.2);
  color: #455a64;
}

.jianghu-player-menu .menu-item.danger {
  color: #c41e3a;
}

.jianghu-player-menu .menu-item.danger:hover {
  background: rgba(196, 30, 58, 0.15);
}

/* 字体大小 */
.chat-jianghu.font-small .player-bubble,
.chat-jianghu.font-small .sys-content,
.chat-jianghu.font-small .rumor-text {
  font-size: 11px;
}

.chat-jianghu.font-large .player-bubble,
.chat-jianghu.font-large .sys-content,
.chat-jianghu.font-large .rumor-text {
  font-size: 15px;
}

/* ===== 左右栏折叠按钮 ===== */
.sidebar-toggle {
  width: 18px;
  min-height: 60px;
  max-height: 120px;
  align-self: center;
  background: linear-gradient(180deg, #8b4513 0%, #654321 100%);
  border: 1px solid #daa520;
  color: #bf360c;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  z-index: 10;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sidebar-toggle:hover {
  background: linear-gradient(180deg, #a0522d 0%, #8b4513 100%);
  box-shadow: 0 0 12px rgba(218, 165, 32, 0.5);
  transform: scale(1.05);
}

.sidebar-toggle.left {
  border-right: none;
  border-radius: 4px 0 0 4px;
  margin-right: -1px;
}

.sidebar-toggle.right {
  border-left: none;
  border-radius: 0 4px 4px 0;
  margin-left: -1px;
}

.sidebar-toggle.collapsed {
  background: linear-gradient(180deg, #daa520 0%, #b8860b 100%);
  color: #5d4037;
}

.sidebar-toggle.collapsed:hover {
  background: linear-gradient(180deg, #bf360c 0%, #daa520 100%);
}

/* ===== 武侠图片表情 ===== */
.chat-jianghu .wuxia-emoji-panel {
  width: 320px;
}

.chat-jianghu .wuxia-emoji-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.chat-jianghu .wuxia-emoji-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-jianghu .wuxia-emoji-item:hover {
  background: rgba(218, 165, 32, 0.25);
  border-color: rgba(139, 69, 19, 0.4);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.chat-jianghu .wuxia-emoji-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 50%;
}

.chat-jianghu .wuxia-emoji-name {
  font-size: 9px;
  color: #5d4037;
  white-space: nowrap;
}

/* 消息中的内联表情 */
.chat-jianghu .inline-emoji {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin: 0 2px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ===== 个人信息弹窗 ===== */
.player-info-modal {
  width: 780px;
  max-height: 85vh;
  background: linear-gradient(180deg, #f5e6c8 0%, #263238 50%, #dcc690 100%);
  border: 3px solid #8b4513;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), inset 0 0 80px rgba(139, 69, 19, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* 标题栏 */
.player-info-modal .pi-header {
  position: relative;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(139, 69, 19, 0.2) 0%, transparent 100%);
  border-bottom: 2px solid rgba(139, 69, 19, 0.3);
}

.player-info-modal .pi-title-scroll {
  position: relative;
  padding: 6px 40px;
}

.player-info-modal .pi-title-text {
  font-size: 22px;
  font-weight: bold;
  color: #5d4037;
  letter-spacing: 12px;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

.player-info-modal .pi-close-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: linear-gradient(180deg, #c41e3a 0%, #8b0000 100%);
  border: 2px solid #8b0000;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.player-info-modal .pi-close-btn:hover {
  transform: translateY(-50%) rotate(90deg);
  box-shadow: 0 0 12px rgba(196, 30, 58, 0.5);
}

/* 顶部信息区 */
.player-info-modal .pi-top-section {
  display: flex;
  gap: 16px;
  padding: 16px;
  flex-shrink: 0;
  border-bottom: 2px solid rgba(139, 69, 19, 0.2);
}

/* 立绘区 */
.player-info-modal .pi-portrait-area {
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.player-info-modal .pi-portrait-frame {
  width: 140px;
  height: 180px;
  border: 3px solid #daa520;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(30, 58, 95, 0.3) 0%, rgba(139, 69, 19, 0.2) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(218, 165, 32, 0.2);
}

.player-info-modal .pi-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.player-info-modal .pi-portrait-name {
  font-size: 18px;
  font-weight: bold;
  color: #5d4037;
  letter-spacing: 4px;
}

.player-info-modal .pi-portrait-title {
  font-size: 12px;
}

.player-info-modal .pi-title-tag {
  color: #c41e3a;
  font-weight: bold;
  background: rgba(196, 30, 58, 0.1);
  padding: 2px 10px;
  border-radius: 10px;
  border: 1px solid rgba(196, 30, 58, 0.3);
}

.player-info-modal .pi-portrait-realm {
  font-size: 12px;
  color: #455a64;
  font-weight: bold;
}

/* 基础信息 */
.player-info-modal .pi-basic-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-info-modal .pi-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.player-info-modal .pi-info-label {
  width: 50px;
  color: #8b7355;
  font-weight: bold;
}

.player-info-modal .pi-info-value {
  color: #3d2817;
  font-weight: bold;
}

.player-info-modal .pi-info-value.pi-sect {
  color: #c41e3a;
}

.player-info-modal .pi-info-value.pi-gold {
  color: #b8860b;
}

.player-info-modal .pi-exp-bar {
  flex: 1;
  height: 18px;
  background: rgba(139, 69, 19, 0.2);
  border: 1px solid rgba(139, 69, 19, 0.4);
  border-radius: 9px;
  position: relative;
  overflow: hidden;
}

.player-info-modal .pi-exp-fill {
  height: 100%;
  background: linear-gradient(90deg, #daa520 0%, #bf360c 100%);
  border-radius: 9px;
  transition: width 0.5s;
}

.player-info-modal .pi-exp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: #3d2817;
  font-weight: bold;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
}

.player-info-modal .pi-hp-mp {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.player-info-modal .pi-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-info-modal .pi-bar-label {
  width: 40px;
  font-size: 12px;
  color: #8b7355;
  font-weight: bold;
}

.player-info-modal .pi-bar {
  flex: 1;
  height: 14px;
  background: rgba(139, 69, 19, 0.2);
  border: 1px solid rgba(139, 69, 19, 0.4);
  border-radius: 7px;
  overflow: hidden;
}

.player-info-modal .pi-bar-fill {
  height: 100%;
  border-radius: 7px;
  transition: width 0.5s;
}

.player-info-modal .pi-hp-bar .pi-bar-fill {
  background: linear-gradient(90deg, #c41e3a 0%, #e63946 100%);
}

.player-info-modal .pi-mp-bar .pi-bar-fill {
  background: linear-gradient(90deg, #1e3a5f 0%, #4169e1 100%);
}

.player-info-modal .pi-bar-text {
  width: 70px;
  font-size: 11px;
  color: #5d4037;
  text-align: right;
}

/* 战斗力区 */
.player-info-modal .pi-power-area {
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(218, 165, 32, 0.15) 0%, rgba(139, 69, 19, 0.1) 100%);
  border: 2px solid rgba(218, 165, 32, 0.4);
  border-radius: 8px;
  padding: 12px;
}

.player-info-modal .pi-power-title {
  font-size: 14px;
  color: #455a64;
  letter-spacing: 6px;
  font-weight: bold;
}

.player-info-modal .pi-power-value {
  font-size: 32px;
  font-weight: bold;
  color: #daa520;
  text-shadow: 0 0 10px rgba(218, 165, 32, 0.5), 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.player-info-modal .pi-power-breakdown {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.player-info-modal .pi-power-item {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #5d4037;
}

.player-info-modal .pi-power-label {
  color: #8b7355;
}

.player-info-modal .pi-power-num {
  font-weight: bold;
  color: #455a64;
}

.player-info-modal .pi-rank-info {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #8b7355;
  padding-top: 6px;
  border-top: 1px solid rgba(139, 69, 19, 0.2);
}

.player-info-modal .pi-rank-num {
  color: #c41e3a;
  font-weight: bold;
}

/* 标签页 */
.player-info-modal .pi-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 16px;
  background: linear-gradient(180deg, rgba(139, 69, 19, 0.15) 0%, rgba(139, 69, 19, 0.05) 100%);
  border-bottom: 2px solid rgba(139, 69, 19, 0.3);
  flex-shrink: 0;
}

.player-info-modal .pi-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(139, 69, 19, 0.3);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.player-info-modal .pi-tab:hover {
  background: rgba(218, 165, 32, 0.2);
  transform: translateY(-2px);
}

.player-info-modal .pi-tab.active {
  background: linear-gradient(180deg, #daa520 0%, #b8860b 100%);
  border-color: #455a64;
  box-shadow: 0 0 10px rgba(218, 165, 32, 0.4);
}

.player-info-modal .pi-tab-icon {
  font-size: 16px;
}

.player-info-modal .pi-tab-name {
  font-size: 11px;
  color: #5d4037;
  font-weight: bold;
}

.player-info-modal .pi-tab.active .pi-tab-name {
  color: #3d2817;
}

/* 标签页内容 */
.player-info-modal .pi-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 69, 19, 0.5) rgba(139, 69, 19, 0.1);
}

.player-info-modal .pi-tab-content::-webkit-scrollbar {
  width: 8px;
}

.player-info-modal .pi-tab-content::-webkit-scrollbar-track {
  background: rgba(139, 69, 19, 0.1);
}

.player-info-modal .pi-tab-content::-webkit-scrollbar-thumb {
  background: rgba(139, 69, 19, 0.5);
  border-radius: 4px;
}

/* 属性面板 */
.player-info-modal .pi-stats-group {
  margin-bottom: 16px;
}

.player-info-modal .pi-stats-group-title {
  font-size: 14px;
  color: #8b4513;
  font-weight: bold;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(139, 69, 19, 0.3);
}

.player-info-modal .pi-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.player-info-modal .pi-stat-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(139, 69, 19, 0.2);
  border-radius: 6px;
  font-size: 13px;
}

.player-info-modal .pi-stat-name {
  color: #8b7355;
}

.player-info-modal .pi-stat-value {
  color: #3d2817;
  font-weight: bold;
}

.player-info-modal .pi-stat-value.pi-crit {
  color: #c41e3a;
}

.player-info-modal .pi-stat-value.pi-dodge {
  color: #4169e1;
}

/* 隐藏属性 */
.player-info-modal .pi-hidden-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.player-info-modal .pi-hidden-stat {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(139, 69, 19, 0.2);
  border-radius: 8px;
}

.player-info-modal .pi-hidden-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.player-info-modal .pi-hidden-info {
  flex: 1;
}

.player-info-modal .pi-hidden-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.player-info-modal .pi-hidden-name {
  font-size: 13px;
  color: #5d4037;
  font-weight: bold;
}

.player-info-modal .pi-hidden-value {
  font-size: 14px;
  color: #3d2817;
  font-weight: bold;
}

.player-info-modal .pi-hidden-level {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: bold;
}

.player-info-modal .pi-hidden-level.level-超凡 {
  background: rgba(196, 30, 58, 0.2);
  color: #c41e3a;
}

.player-info-modal .pi-hidden-level.level-深厚 {
  background: rgba(218, 165, 32, 0.2);
  color: #b8860b;
}

.player-info-modal .pi-hidden-level.level-普通 {
  background: rgba(34, 139, 34, 0.2);
  color: #228b22;
}

.player-info-modal .pi-hidden-level.level-浅薄 {
  background: rgba(139, 69, 19, 0.2);
  color: #8b7355;
}

.player-info-modal .pi-hidden-bar {
  height: 8px;
  background: rgba(139, 69, 19, 0.2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}

.player-info-modal .pi-hidden-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s;
}

.player-info-modal .pi-hidden-fill.luck {
  background: linear-gradient(90deg, #228b22, #32cd32);
}

.player-info-modal .pi-hidden-fill.fortune {
  background: linear-gradient(90deg, #daa520, #bf360c);
}

.player-info-modal .pi-hidden-fill.mood {
  background: linear-gradient(90deg, #4169e1, #6495ed);
}

.player-info-modal .pi-hidden-desc {
  font-size: 10px;
  color: #8b7355;
}

/* 装备面板 */
.player-info-modal .pi-equip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.player-info-modal .pi-equip-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(139, 69, 19, 0.3);
  border-radius: 8px;
  min-height: 120px;
}

.player-info-modal .pi-equip-slot.equipped {
  background: rgba(218, 165, 32, 0.1);
  border-color: rgba(218, 165, 32, 0.5);
}

.player-info-modal .pi-equip-slot-label {
  font-size: 10px;
  color: #8b7355;
}

.player-info-modal .pi-equip-icon {
  width: 48px;
  height: 48px;
  background-image: url('assets/img/equipment.png');
  background-size: 300% 300%;
  border-radius: 6px;
}

.player-info-modal .pi-equip-name {
  font-size: 11px;
  color: #3d2817;
  font-weight: bold;
  text-align: center;
}

.player-info-modal .pi-equip-level {
  font-size: 10px;
  color: #455a64;
}

.player-info-modal .pi-equip-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.player-info-modal .pi-equip-attrs span {
  font-size: 9px;
  color: #228b22;
  background: rgba(34, 139, 34, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
}

.player-info-modal .pi-equip-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #8b7355;
}

.player-info-modal .pi-equip-summary {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: rgba(139, 69, 19, 0.1);
  border-radius: 6px;
  font-size: 13px;
  color: #5d4037;
}

.player-info-modal .pi-gold {
  color: #b8860b;
}

/* 技能面板 */
.player-info-modal .pi-skills-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.player-info-modal .pi-skill-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(139, 69, 19, 0.2);
  border-radius: 8px;
}

.player-info-modal .pi-skill-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: linear-gradient(135deg, rgba(218, 165, 32, 0.2), rgba(139, 69, 19, 0.1));
  border: 2px solid rgba(218, 165, 32, 0.4);
  border-radius: 8px;
}

.player-info-modal .pi-skill-info {
  flex: 1;
}

.player-info-modal .pi-skill-name {
  font-size: 14px;
  color: #3d2817;
  font-weight: bold;
}

.player-info-modal .pi-skill-desc {
  font-size: 11px;
  color: #8b7355;
}

.player-info-modal .pi-skill-level {
  font-size: 14px;
  color: #c41e3a;
  font-weight: bold;
}

.player-info-modal .pi-empty-tip {
  text-align: center;
  padding: 40px;
  color: #8b7355;
  font-size: 14px;
}

.player-info-modal .pi-skills-summary {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: rgba(139, 69, 19, 0.1);
  border-radius: 6px;
  font-size: 13px;
  color: #5d4037;
}

/* 修为面板 */
.player-info-modal .pi-realm-display {
  text-align: center;
  margin-bottom: 16px;
}

.player-info-modal .pi-realm-current {
  margin-bottom: 10px;
}

.player-info-modal .pi-realm-label {
  font-size: 12px;
  color: #8b7355;
  display: block;
  margin-bottom: 4px;
}

.player-info-modal .pi-realm-name {
  font-size: 24px;
  color: #c41e3a;
  font-weight: bold;
  letter-spacing: 4px;
}

.player-info-modal .pi-realm-sub {
  font-size: 14px;
  color: #455a64;
  margin-left: 8px;
}

.player-info-modal .pi-cultivation-bar {
  height: 20px;
  background: rgba(139, 69, 19, 0.2);
  border: 1px solid rgba(139, 69, 19, 0.4);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.player-info-modal .pi-cultivation-fill {
  height: 100%;
  background: linear-gradient(90deg, #008b8b, #20b2aa, #48d1cc);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 139, 139, 0.5);
}

.player-info-modal .pi-cultivation-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.player-info-modal .pi-realm-list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.player-info-modal .pi-realm-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0.4;
}

.player-info-modal .pi-realm-item.passed {
  opacity: 0.7;
}

.player-info-modal .pi-realm-item.current {
  opacity: 1;
}

.player-info-modal .pi-realm-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #8b7355;
}

.player-info-modal .pi-realm-item.passed .pi-realm-dot {
  background: #228b22;
}

.player-info-modal .pi-realm-item.current .pi-realm-dot {
  background: #c41e3a;
  box-shadow: 0 0 10px rgba(196, 30, 58, 0.6);
}

.player-info-modal .pi-realm-text {
  font-size: 10px;
  color: #5d4037;
}

.player-info-modal .pi-cultivation-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-info-modal .pi-cult-info-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  font-size: 13px;
  color: #5d4037;
}

/* 统计面板 */
.player-info-modal .pi-stats2-group {
  margin-bottom: 14px;
}

.player-info-modal .pi-stats2-title {
  font-size: 14px;
  color: #8b4513;
  font-weight: bold;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(139, 69, 19, 0.3);
}

.player-info-modal .pi-stats2-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.player-info-modal .pi-stats2-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(139, 69, 19, 0.2);
  border-radius: 8px;
}

.player-info-modal .pi-stats2-item span {
  font-size: 11px;
  color: #8b7355;
}

.player-info-modal .pi-stats2-item b {
  font-size: 16px;
  color: #3d2817;
}

.player-info-modal .pi-stats2-item b.pi-crit {
  color: #c41e3a;
}

/* 社交面板 */
.player-info-modal .pi-social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.player-info-modal .pi-social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(139, 69, 19, 0.2);
  border-radius: 8px;
}

.player-info-modal .pi-social-icon {
  font-size: 24px;
}

.player-info-modal .pi-social-label {
  font-size: 11px;
  color: #8b7355;
}

.player-info-modal .pi-social-value {
  font-size: 14px;
  color: #3d2817;
  font-weight: bold;
}

.player-info-modal .pi-social-reputation {
  padding: 14px;
  background: rgba(218, 165, 32, 0.1);
  border: 1px solid rgba(218, 165, 32, 0.3);
  border-radius: 8px;
}

.player-info-modal .pi-rep-title {
  font-size: 14px;
  color: #455a64;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}

.player-info-modal .pi-rep-bar {
  height: 16px;
  background: rgba(139, 69, 19, 0.2);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

.player-info-modal .pi-rep-fill {
  height: 100%;
  background: linear-gradient(90deg, #daa520, #bf360c);
  border-radius: 8px;
}

.player-info-modal .pi-rep-info {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #5d4037;
  margin-bottom: 8px;
}

.player-info-modal .pi-rep-levels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #8b7355;
}

/* ===== 地图弹窗 ===== */
.map-modal {
  width: 900px;
  max-height: 85vh;
  background: linear-gradient(180deg, #f7ecd2 0%, #e9d7b2 55%, #dcc690 100%);
  border: 3px solid #8b4513;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 标题栏 */
.map-modal .map-header {
  position: relative;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(139, 69, 19, 0.2) 0%, transparent 100%);
  border-bottom: 2px solid rgba(139, 69, 19, 0.3);
}

.map-modal .map-title-text {
  font-size: 22px;
  font-weight: bold;
  color: #5d4037;
  letter-spacing: 12px;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

.map-modal .map-close-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: linear-gradient(180deg, #c41e3a 0%, #8b0000 100%);
  border: 2px solid #8b0000;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.map-modal .map-close-btn:hover {
  transform: translateY(-50%) rotate(90deg);
  box-shadow: 0 0 12px rgba(196, 30, 58, 0.5);
}

/* 主内容区 */
.map-modal .map-main-content {
  flex: 1;
  display: flex;
  gap: 12px;
  padding: 12px;
  min-height: 0;
}

/* 地图区域 */
.map-modal .map-area {
  flex: 1;
  border: 2px solid #8b4513;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.map-modal .map-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  background-color: #171210;
}

.map-modal .map-clouds {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(218, 165, 32, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 72% 72%, rgba(138, 69, 19, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, rgba(12, 9, 6, 0.62) 0%, rgba(18, 13, 9, 0.52) 45%, rgba(12, 9, 6, 0.66) 100%);
  pointer-events: none;
  z-index: 1;
}

.map-modal .map-zone-label {
  position: absolute;
  left: 2%;
  transform: translateY(-50%);
  font-size: 12px;
  color: rgba(218, 165, 32, 0.75);
  background: rgba(20, 14, 8, 0.55);
  border: 1px solid rgba(218, 165, 32, 0.3);
  border-radius: 4px;
  padding: 1px 8px;
  letter-spacing: 2px;
  z-index: 4;
  pointer-events: none;
}

@keyframes cloudDrift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* 地图路径 */
.map-modal .map-paths {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.map-modal .map-path-line {
  stroke: rgba(218, 165, 32, 0.6);
  stroke-width: 0.3;
  fill: none;
}

/* 地图节点 */
.map-modal .map-node {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 5;
  transition: all 0.3s;
}

.map-modal .map-node:hover {
  transform: translate(-50%, -50%) scale(1.15);
  z-index: 10;
}

.map-modal .node-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #8b4513;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.map-modal .node-name {
  font-size: 11px;
  color: #3d2817;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.9), 1px 1px 2px rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.map-modal .node-level {
  font-size: 9px;
  color: #8b4513;
  background: rgba(255, 255, 255, 0.7);
  padding: 0 4px;
  border-radius: 4px;
}

/* 当前位置 */
.map-modal .map-node.current .node-icon {
  background: linear-gradient(135deg, #bf360c, #daa520);
  border-color: #b8860b;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

.map-modal .map-node.current .node-name {
  color: #c41e3a;
}

.map-modal .node-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border: 2px solid rgba(255, 215, 0, 0.6);
  border-radius: 50%;
  animation: pulse 1.5s ease-out infinite;
  pointer-events: none;
}

@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

/* 可前往 */
.map-modal .map-node.available .node-icon {
  border-color: #228b22;
  box-shadow: 0 0 10px rgba(34, 139, 34, 0.5);
}

/* 未解锁 */
.map-modal .map-node.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.map-modal .map-node.locked .node-icon {
  filter: grayscale(0.7);
}

.map-modal .node-lock {
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 14px;
}

/* 远距离 */
.map-modal .map-node.far {
  opacity: 0.6;
}

/* 右侧信息面板 */
.map-modal .map-info-panel {
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 69, 19, 0.5) rgba(139, 69, 19, 0.1);
}

.map-modal .map-info-panel::-webkit-scrollbar {
  width: 6px;
}

.map-modal .map-info-panel::-webkit-scrollbar-thumb {
  background: rgba(139, 69, 19, 0.5);
  border-radius: 3px;
}

.map-modal .map-info-section {
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(139, 69, 19, 0.3);
  border-radius: 8px;
  padding: 10px;
}

.map-modal .map-info-title {
  font-size: 13px;
  color: #8b4513;
  font-weight: bold;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(139, 69, 19, 0.2);
}

/* 当前位置卡片 */
.map-modal .map-current-card {
  text-align: center;
}

.map-modal .map-current-name {
  font-size: 16px;
  color: #c41e3a;
  font-weight: bold;
  margin-bottom: 4px;
}

.map-modal .map-current-level {
  font-size: 11px;
  color: #455a64;
  margin-left: 6px;
}

.map-modal .map-current-desc {
  font-size: 11px;
  color: #5d4037;
  line-height: 1.5;
  margin-bottom: 8px;
}

.map-modal .map-current-weather {
  display: flex;
  justify-content: space-around;
  font-size: 10px;
  color: #8b7355;
  padding-top: 6px;
  border-top: 1px solid rgba(139, 69, 19, 0.2);
}

/* 传送列表 */
.map-modal .map-travel-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map-modal .map-travel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(139, 69, 19, 0.2);
  border-radius: 6px;
}

.map-modal .map-travel-item.locked {
  opacity: 0.5;
}

.map-modal .travel-icon {
  font-size: 18px;
}

.map-modal .travel-info {
  flex: 1;
}

.map-modal .travel-name {
  font-size: 12px;
  color: #3d2817;
  font-weight: bold;
}

.map-modal .travel-cost {
  font-size: 10px;
  color: #8b7355;
}

.map-modal .travel-btn {
  padding: 4px 10px;
  font-size: 11px;
  color: #fff;
  background: linear-gradient(180deg, #228b22 0%, #1a6b1a 100%);
  border: 1px solid #1a6b1a;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
}

.map-modal .travel-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #2ea52e 0%, #228b22 100%);
  transform: translateY(-1px);
}

.map-modal .travel-btn:disabled {
  background: #8b7355;
  border-color: #6b5545;
  cursor: not-allowed;
}

/* NPC列表 */
.map-modal .map-npc-list,
.map-modal .map-monster-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.map-modal .map-npc-item,
.map-modal .map-monster-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: 600;
  color: #4a2c14;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}

.map-modal .npc-avatar-icon,
.map-modal .monster-icon {
  font-size: 14px;
}

.map-modal .npc-name-text,
.map-modal .monster-name {
  flex: 1;
}

.map-modal .npc-func {
  font-size: 9px;
  color: #455a64;
  background: rgba(218, 165, 32, 0.2);
  padding: 1px 5px;
  border-radius: 3px;
}

.map-modal .monster-level {
  font-size: 10px;
  color: #c41e3a;
  font-weight: bold;
}

.map-modal .map-empty-tip {
  text-align: center;
  font-size: 11px;
  color: #8b7355;
  padding: 10px;
}

/* 底部操作栏 */
.map-modal .map-bottom-bar {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(139, 69, 19, 0.15) 0%, rgba(139, 69, 19, 0.1) 100%);
  border-top: 2px solid rgba(139, 69, 19, 0.3);
  flex-shrink: 0;
}

.map-modal .map-action-btn {
  flex: 1;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  border: 2px solid;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.map-modal .map-action-btn.explore {
  color: #fff;
  background: linear-gradient(180deg, #c41e3a 0%, #8b0000 100%);
  border-color: #8b0000;
}

.map-modal .map-action-btn.explore:hover {
  background: linear-gradient(180deg, #e63946 0%, #c41e3a 100%);
  box-shadow: 0 0 12px rgba(196, 30, 58, 0.4);
  transform: translateY(-2px);
}

.map-modal .map-action-btn.quick-travel {
  color: #5d4037;
  background: linear-gradient(180deg, #daa520 0%, #b8860b 100%);
  border-color: #455a64;
}

.map-modal .map-action-btn.quick-travel:hover {
  background: linear-gradient(180deg, #bf360c 0%, #daa520 100%);
  box-shadow: 0 0 12px rgba(218, 165, 32, 0.4);
  transform: translateY(-2px);
}

.map-modal .map-action-btn.info {
  color: #fff;
  background: linear-gradient(180deg, #1e3a5f 0%, #152a45 100%);
  border-color: #152a45;
}

.map-modal .map-action-btn.info:hover {
  background: linear-gradient(180deg, #2a4a7f 0%, #1e3a5f 100%);
  box-shadow: 0 0 12px rgba(30, 58, 95, 0.4);
  transform: translateY(-2px);
}

/* 地点详情弹窗 */
.map-modal .map-detail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.map-modal .map-detail-modal {
  width: 320px;
  background: linear-gradient(180deg, #f9efd8 0%, #e8d6b0 100%);
  border: 3px solid #8b4513;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.map-modal .detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(139, 69, 19, 0.3);
}

.map-modal .detail-icon {
  font-size: 28px;
}

.map-modal .detail-name {
  flex: 1;
  font-size: 18px;
  color: #3d2817;
  font-weight: bold;
}

.map-modal .detail-level {
  font-size: 13px;
  color: #c41e3a;
  font-weight: bold;
}

.map-modal .detail-desc {
  font-size: 13px;
  color: #5d4037;
  line-height: 1.6;
  margin-bottom: 12px;
}

.map-modal .detail-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.map-modal .detail-stat {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: #54381c;
}

.map-modal .detail-stat b {
  color: #3d2817;
}

.map-modal .detail-actions {
  display: flex;
  gap: 8px;
}

.map-modal .detail-travel-btn {
  flex: 1;
  padding: 10px;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(180deg, #228b22 0%, #1a6b1a 100%);
  border: 2px solid #1a6b1a;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
}

.map-modal .detail-travel-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #2ea52e 0%, #228b22 100%);
}

.map-modal .detail-travel-btn:disabled {
  background: #8b7355;
  border-color: #6b5545;
  cursor: not-allowed;
}

.map-modal .detail-current-tip {
  flex: 1;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  color: #b8860b;
  font-weight: bold;
  background: rgba(218, 165, 32, 0.2);
  border-radius: 6px;
}

.map-modal .detail-close-btn {
  padding: 10px 16px;
  font-size: 14px;
  color: #5d4037;
  background: rgba(255, 255, 255, 0.4);
  border: 2px solid rgba(139, 69, 19, 0.4);
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
}

.map-modal .detail-close-btn:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* 左侧栏大地图按钮 */
.sidebar-map-btn {
  flex: 1;
  padding: 14px 8px;
  font-size: 14px;
  color: #ffd700;
  background: linear-gradient(180deg, rgba(139, 90, 20, 0.6) 0%, rgba(101, 67, 13, 0.7) 100%);
  border: none;
  border-bottom: 3px solid #ffd700;
  border-top: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 0;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s;
  margin: 0;
  letter-spacing: 3px;
  font-family: var(--font-body);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sidebar-map-btn:hover {
  background: linear-gradient(180deg, rgba(184, 134, 11, 0.8) 0%, rgba(139, 90, 20, 0.9) 100%);
  color: #fff8dc;
  border-bottom-color: #fff8dc;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.7), inset 0 1px 0 rgba(255, 248, 220, 0.5);
  text-shadow: 0 0 15px rgba(255, 248, 220, 1), 0 2px 4px rgba(0, 0, 0, 0.6);
}
.sidebar-siege-btn {
  flex: 1;
  padding: 14px 8px;
  font-size: 14px;
  color: #ffd700;
  background: linear-gradient(180deg, rgba(139, 30, 30, 0.65) 0%, rgba(101, 20, 13, 0.75) 100%);
  border: none;
  border-bottom: 3px solid #8b1a1a;
  border-radius: 0;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  transition: all .15s;
  letter-spacing: 1px;
}
.sidebar-siege-btn:hover {
  background: linear-gradient(180deg, rgba(184, 40, 40, 0.85) 0%, rgba(139, 30, 20, 0.95) 100%);
  color: #fff8dc;
  border-bottom-color: #ffd700;
  box-shadow: 0 0 20px rgba(255, 60, 40, 0.6), inset 0 1px 0 rgba(255, 200, 180, 0.4);
  text-shadow: 0 0 12px rgba(255, 248, 220, 1), 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* ===== 弹窗遮罩层（统一居中） ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 弹窗通用动画 */
.modal-overlay > div {
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* ===== 个人信息弹窗遮罩 ===== */
.player-info-modal-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: 2000;
}

/* ===== 地图弹窗遮罩 ===== */
.map-modal-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: 2000;
}


/* ===== 玩家详情弹窗 ===== */
.player-detail-modal-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: 2000;
}

.player-detail-modal {
  width: 480px;
  max-height: 85vh;
  background: linear-gradient(180deg, #2a1810 0%, #1a0f08 100%);
  border: 2px solid #c9a96e;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(201, 169, 110, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.player-detail-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('assets/img/modal-bg/sect.png') center/cover;
  opacity: 0.15;
  pointer-events: none;
}

.pd-header {
  position: relative;
  height: 48px;
  background: linear-gradient(90deg, #3d2817, #5c3a21, #3d2817);
  border-bottom: 2px solid #c9a96e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-title {
  font-size: 18px;
  font-weight: bold;
  color: #f5e6c8;
  letter-spacing: 8px;
  text-shadow: 0 0 10px rgba(201, 169, 110, 0.6);
}

.pd-close-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: rgba(139, 69, 19, 0.5);
  border: 1px solid #c9a96e;
  border-radius: 50%;
  color: #f5e6c8;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.pd-close-btn:hover {
  background: #00838f;
  color: #2a1810;
}

.pd-top-section {
  position: relative;
  display: flex;
  padding: 20px;
  gap: 20px;
  border-bottom: 1px solid rgba(69, 90, 100, 0.2);
}

.pd-avatar-area {
  position: relative;
  flex-shrink: 0;
}

.pd-avatar-frame {
  width: 90px;
  height: 90px;
  border: 3px solid #c9a96e;
  border-radius: 50%;
  overflow: hidden;
  background: #1a0f08;
  box-shadow: 0 0 20px rgba(201, 169, 110, 0.4);
}

.pd-avatar-img {
  width: 100%;
  height: 100%;
  background-size: 400% 400%;
  background-repeat: no-repeat;
}

.pd-avatar-level {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #00838f, #455a64);
  color: #2a1810;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 10px;
  border: 1px solid #f5e6c8;
}

.pd-basic-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.pd-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pd-name {
  font-size: 22px;
  font-weight: bold;
  color: #f5e6c8;
  text-shadow: 0 0 8px rgba(69, 90, 100, 0.3);
}

.pd-title-tag {
  font-size: 12px;
  color: #bf360c;
  background: rgba(255, 215, 0, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.pd-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pd-info-label {
  font-size: 13px;
  color: #a08060;
  width: 40px;
}

.pd-info-value {
  font-size: 14px;
  color: #263238;
}

.pd-sect {
  color: #1565c0;
}

.pd-realm {
  color: #dda0dd;
}

.pd-power {
  color: #ff6347;
  font-weight: bold;
}

.pd-stats-section,
.pd-equip-section {
  position: relative;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(69, 90, 100, 0.2);
}

.pd-section-title {
  font-size: 14px;
  color: #00838f;
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: 4px;
}

.pd-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.pd-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  background: rgba(201, 169, 110, 0.08);
  border-radius: 6px;
  border: 1px solid rgba(69, 90, 100, 0.15);
}

.pd-stat-label {
  font-size: 12px;
  color: #a08060;
}

.pd-stat-value {
  font-size: 16px;
  font-weight: bold;
  color: #f5e6c8;
}

.pd-equip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.pd-equip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pd-equip-icon {
  width: 44px;
  height: 44px;
  border: 2px solid;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.pd-equip-name {
  font-size: 11px;
  text-align: center;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-actions {
  position: relative;
  display: flex;
  gap: 8px;
  padding: 15px 20px;
}

.pd-action-btn {
  flex: 1;
  padding: 10px 0;
  border: 1px solid #c9a96e;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(69, 90, 100, 0.15), rgba(139, 69, 19, 0.3));
  color: #f5e6c8;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.pd-action-btn:hover {
  background: linear-gradient(180deg, rgba(201, 169, 110, 0.4), rgba(139, 69, 19, 0.5));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(69, 90, 100, 0.2);
}

.pd-action-btn.chat:hover { border-color: #4fc3f7; color: #4fc3f7; }
.pd-action-btn.friend:hover { border-color: #81c784; color: #81c784; }
.pd-action-btn.team:hover { border-color: #ffb74d; color: #ffb74d; }
.pd-action-btn.challenge:hover { border-color: #e57373; color: #e57373; }

/* 在线玩家列表hover效果 */
.online-player {
  cursor: pointer;
  transition: all 0.2s;
}

.online-player:hover:not(.self) {
  background: rgba(69, 90, 100, 0.1);
  padding-left: 12px;
}

.online-player.self {
  cursor: default;
  color: #00838f;
}

/* ===== 队伍/私聊信息栏 ===== */
.chat-team-bar {
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.15), rgba(201, 169, 110, 0.1));
  border: 1px solid rgba(69, 90, 100, 0.2);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
}

.team-bar-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.team-bar-title {
  color: #bf360c;
  font-size: 13px;
  font-weight: bold;
}

.team-bar-leader {
  color: #00838f;
  font-size: 12px;
}

.team-bar-members {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.team-member {
  background: rgba(69, 90, 100, 0.1);
  border: 1px solid rgba(69, 90, 100, 0.2);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  color: #d4c4a8;
}

.team-member.self {
  background: rgba(76, 175, 80, 0.2);
  border-color: #4caf50;
  color: #81c784;
}

.team-leave-btn {
  width: 100%;
  padding: 4px 0;
  background: rgba(244, 67, 54, 0.15);
  border: 1px solid rgba(244, 67, 54, 0.4);
  border-radius: 4px;
  color: #ef9a9a;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.team-leave-btn:hover {
  background: rgba(244, 67, 54, 0.3);
}

/* 私聊信息栏 */
.chat-private-bar {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.12), rgba(233, 30, 99, 0.08));
  border: 1px solid rgba(233, 30, 99, 0.3);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.private-bar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.private-bar-title {
  color: #f48fb1;
  font-size: 12px;
}

.private-bar-target {
  color: #f8bbd0;
  font-size: 14px;
  font-weight: bold;
}

.private-close-btn {
  padding: 4px 12px;
  background: rgba(233, 30, 99, 0.15);
  border: 1px solid rgba(233, 30, 99, 0.4);
  border-radius: 4px;
  color: #f48fb1;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.private-close-btn:hover {
  background: rgba(233, 30, 99, 0.3);
}

/* 空状态提示 */
.chat-empty-hint {
  text-align: center;
  padding: 30px 20px;
  color: #8a7a6a;
}

.empty-hint-icon {
  font-size: 32px;
  margin-bottom: 8px;
  opacity: 0.5;
}

.empty-hint-text {
  font-size: 14px;
  color: #a09080;
  margin-bottom: 4px;
}

.empty-hint-sub {
  font-size: 12px;
  color: #706050;
}

/* 私聊目标显示 */
.private-to {
  color: #ce93d8;
  font-size: 11px;
  margin-left: 6px;
  opacity: 0.8;
}

/* ============================================================
   专业游戏聊天UI - 深色厚重风格
   ============================================================ */

.chat-panel-pro {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
  border: 1px solid #b0bec5;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(201,169,110,0.1);
}

/* 顶部标题栏 */
.chat-pro-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  background: linear-gradient(180deg, #eceff1 0%, #1f1812 100%);
  border-bottom: 1px solid #b0bec5;
  position: relative;
}

.chat-pro-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #00838f, transparent);
}

.chat-pro-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-pro-title-icon {
  font-size: 16px;
  color: #00838f;
  text-shadow: 0 0 8px rgba(201,169,110,0.5);
}

.chat-pro-title-text {
  font-size: 15px;
  font-weight: bold;
  color: #263238;
  letter-spacing: 3px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.chat-pro-online {
  display: flex;
  align-items: center;
  gap: 6px;
}

.online-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4caf50;
  box-shadow: 0 0 6px #4caf50;
  animation: onlinePulse 2s ease-in-out infinite;
}

@keyframes onlinePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.online-text {
  font-size: 11px;
  color: #8a7a6a;
}

/* 频道切换栏 */
.chat-pro-channels {
  display: flex;
  background: #fafafa;
  border-bottom: 1px solid #3a2f22;
  padding: 0 4px;
}

.chat-pro-channel {
  flex: 1;
  padding: 7px 4px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #7a6a5a;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.chat-pro-channel:hover {
  color: #00838f;
  background: rgba(201,169,110,0.05);
}

.chat-pro-channel.active {
  color: #263238;
  border-bottom-color: #c9a96e;
  background: linear-gradient(180deg, rgba(201,169,110,0.1) 0%, transparent 100%);
}

.chat-pro-channel.active .channel-pro-text {
  text-shadow: 0 0 8px rgba(201,169,110,0.4);
}

.chat-pro-settings {
  width: 32px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #7a6a5a;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-pro-settings:hover {
  color: #00838f;
}

/* 设置面板 */
.chat-pro-settings-panel {
  position: absolute;
  top: 75px;
  right: 8px;
  width: 180px;
  background: #1f1812;
  border: 1px solid #b0bec5;
  border-radius: 4px;
  padding: 10px;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

.settings-pro-header {
  font-size: 13px;
  color: #263238;
  font-weight: bold;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #3a2f22;
}

.settings-pro-group {
  margin-bottom: 8px;
}

.group-pro-title {
  font-size: 11px;
  color: #8a7a6a;
  margin-bottom: 4px;
}

.setting-pro-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #455a64;
  padding: 3px 0;
  cursor: pointer;
}

.setting-pro-item input {
  accent-color: #00838f;
}

.clear-pro-btn {
  width: 100%;
  padding: 5px;
  background: rgba(204,85,85,0.15);
  border: 1px solid rgba(204,85,85,0.4);
  border-radius: 3px;
  color: #cc7777;
  font-size: 12px;
  cursor: pointer;
  margin-top: 4px;
}

.clear-pro-btn:hover {
  background: rgba(204,85,85,0.25);
}

/* 消息区 */
.chat-pro-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  background: #f5f5f5;
}

.chat-pro-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-pro-messages::-webkit-scrollbar-track {
  background: #fafafa;
}

.chat-pro-messages::-webkit-scrollbar-thumb {
  background: #b0bec5;
  border-radius: 3px;
}

.chat-pro-messages::-webkit-scrollbar-thumb:hover {
  background: #7a6a5a;
}

.chat-pro-empty {
  text-align: center;
  padding: 40px 20px;
  color: #b0bec5;
}

.empty-pro-icon {
  font-size: 28px;
  margin-bottom: 8px;
  opacity: 0.4;
}

.empty-pro-text {
  font-size: 13px;
}

/* 消息项通用 */
.msg-pro-item {
  margin-bottom: 6px;
  animation: msgFadeIn 0.3s ease-out;
}

@keyframes msgFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 系统消息 */
.msg-pro-system {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 8px 4px 10px;
  border-left: 3px solid #c9a96e;
  background: rgba(201,169,110,0.05);
  border-radius: 0 3px 3px 0;
  font-size: 12px;
  line-height: 1.5;
}

.sys-pro-icon {
  font-size: 12px;
}

.sys-pro-prefix {
  font-weight: bold;
  font-size: 11px;
}

.sys-pro-content {
  color: #455a64;
}

.sys-pro-time {
  margin-left: auto;
  font-size: 10px;
  color: #b0bec5;
}

/* 传闻消息 */
.msg-pro-rumor {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: linear-gradient(90deg, rgba(224,112,80,0.1) 0%, transparent 100%);
  border-left: 3px solid #78909c;
  border-radius: 0 3px 3px 0;
  font-size: 12px;
}

.rumor-pro-icon {
  font-size: 12px;
}

.rumor-pro-content {
  color: #e0a080;
  font-style: italic;
}

/* 玩家消息 */
.msg-pro-player {
  display: flex;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.2s;
}

.msg-pro-player:hover {
  background: rgba(201,169,110,0.05);
}

.msg-pro-player.self {
  flex-direction: row-reverse;
}

.player-pro-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  cursor: pointer;
}

.avatar-pro-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #b0bec5;
  background-image: url('/src/assets/img/avatars.png');
  background-size: 200% 400%;
  transition: border-color 0.2s;
}

.player-pro-avatar:hover .avatar-pro-img {
  border-color: #c9a96e;
}

.avatar-pro-level {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: #eceff1;
  border: 1px solid #c9a96e;
  border-radius: 8px;
  padding: 0 4px;
  font-size: 9px;
  color: #263238;
  line-height: 14px;
}

.player-pro-body {
  flex: 1;
  min-width: 0;
}

.msg-pro-player.self .player-pro-body {
  text-align: right;
}

.player-pro-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}

.msg-pro-player.self .player-pro-meta {
  justify-content: flex-end;
}

.player-pro-name {
  font-size: 12px;
  font-weight: bold;
  color: #1565c0;
  cursor: pointer;
  transition: color 0.2s;
}

.player-pro-name:hover {
  color: #a8dcf0;
  text-decoration: underline;
}

.player-pro-name.self {
  color: #bf360c;
}

.private-pro-to {
  font-size: 10px;
  color: #9a7aaa;
}

.player-pro-sect {
  font-size: 10px;
  color: #8a7a6a;
  background: rgba(138,122,106,0.15);
  padding: 1px 4px;
  border-radius: 2px;
}

.player-pro-time {
  font-size: 10px;
  color: #b0bec5;
}

.player-pro-bubble {
  display: inline-block;
  max-width: 85%;
  padding: 6px 10px;
  background: #25201a;
  border: 1px solid #3a2f22;
  border-radius: 4px;
  font-size: 13px;
  color: #d4c8b0;
  line-height: 1.5;
  word-break: break-word;
  text-align: left;
}

.msg-pro-player.self .player-pro-bubble {
  background: linear-gradient(135deg, #2a2518 0%, #25201a 100%);
  border-color: #b0bec5;
}

/* 事件消息 */
.msg-pro-event {
  padding: 4px 0;
}

.event-pro-card {
  background: linear-gradient(135deg, rgba(201,169,110,0.1) 0%, rgba(139,69,19,0.08) 100%);
  border: 1px solid #8b7355;
  border-radius: 4px;
  padding: 10px 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.event-pro-title {
  font-size: 13px;
  font-weight: bold;
  color: #263238;
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: 2px;
}

.event-pro-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.event-pro-choice {
  flex: 1;
  min-width: 100px;
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(201,169,110,0.15) 0%, rgba(139,69,19,0.2) 100%);
  border: 1px solid #8b7355;
  border-radius: 3px;
  color: #263238;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.event-pro-choice:hover {
  background: linear-gradient(180deg, rgba(201,169,110,0.25) 0%, rgba(139,69,19,0.3) 100%);
  border-color: #c9a96e;
  box-shadow: 0 0 8px rgba(201,169,110,0.3);
}

.event-pro-chosen {
  margin-top: 6px;
  font-size: 11px;
  color: #8a7a6a;
  text-align: center;
}

/* 队伍/私聊信息栏 */
.chat-pro-team-bar,
.chat-pro-private-bar {
  background: linear-gradient(135deg, rgba(201,169,110,0.1) 0%, rgba(139,69,19,0.05) 100%);
  border: 1px solid #b0bec5;
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.team-pro-info,
.private-pro-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.team-pro-title,
.private-pro-title {
  color: #263238;
  font-size: 12px;
  font-weight: bold;
}

.team-pro-leader {
  color: #8a7a6a;
  font-size: 11px;
}

.team-pro-members {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.team-pro-member {
  background: rgba(201,169,110,0.1);
  border: 1px solid #b0bec5;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 10px;
  color: #455a64;
}

.team-pro-member.self {
  background: rgba(76,175,80,0.15);
  border-color: #4caf50;
  color: #81c784;
}

.team-pro-leave,
.private-pro-close {
  width: 100%;
  padding: 4px;
  background: rgba(204,85,85,0.1);
  border: 1px solid rgba(204,85,85,0.3);
  border-radius: 3px;
  color: #cc7777;
  font-size: 11px;
  cursor: pointer;
}

.team-pro-leave:hover,
.private-pro-close:hover {
  background: rgba(204,85,85,0.2);
}

.private-pro-target {
  color: #f48fb1;
  font-size: 13px;
  font-weight: bold;
}

.chat-pro-empty-hint {
  text-align: center;
  padding: 20px;
  color: #b0bec5;
}

.hint-pro-icon {
  font-size: 24px;
  margin-bottom: 6px;
}

.hint-pro-text {
  font-size: 13px;
  color: #8a7a6a;
  margin-bottom: 2px;
}

.hint-pro-sub {
  font-size: 11px;
  color: #b0bec5;
}

/* 快捷栏 */
.chat-pro-quickbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #fafafa;
  border-top: 1px solid #3a2f22;
  border-bottom: 1px solid #3a2f22;
  position: relative;
}

.quick-pro-buttons {
  display: flex;
  gap: 4px;
}

.quick-pro-btn {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid #3a2f22;
  border-radius: 3px;
  color: #8a7a6a;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-pro-btn:hover,
.quick-pro-btn.active {
  border-color: #c9a96e;
  color: #263238;
  background: rgba(201,169,110,0.1);
}

.quick-pro-skills {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* 快捷面板 */
.quick-pro-panel {
  position: absolute;
  bottom: 42px;
  left: 10px;
  background: #1f1812;
  border: 1px solid #b0bec5;
  border-radius: 4px;
  padding: 8px;
  z-index: 50;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  min-width: 200px;
}

.panel-pro-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #263238;
  font-weight: bold;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #3a2f22;
}

.close-pro-btn {
  background: none;
  border: none;
  color: #8a7a6a;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}

.close-pro-btn:hover {
  color: #cc7777;
}

.emoji-pro-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  max-height: 150px;
  overflow-y: auto;
}

.emoji-pro-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}

.emoji-pro-item:hover {
  background: rgba(201,169,110,0.1);
  border-color: #b0bec5;
}

.emoji-pro-img {
  width: 24px;
  height: 24px;
}

.emoji-pro-name {
  font-size: 9px;
  color: #8a7a6a;
  margin-top: 2px;
}

.phrases-pro-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 150px;
  overflow-y: auto;
}

.phrase-pro-item {
  padding: 5px 8px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: #455a64;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}

.phrase-pro-item:hover {
  background: rgba(201,169,110,0.1);
  color: #263238;
}

.actions-pro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.action-pro-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 4px;
  background: transparent;
  border: 1px solid #3a2f22;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}

.action-pro-item:hover {
  border-color: #c9a96e;
  background: rgba(201,169,110,0.1);
}

.action-pro-icon {
  font-size: 16px;
}

.action-pro-name {
  font-size: 10px;
  color: #8a7a6a;
  margin-top: 2px;
}

/* 输入区 */
.chat-pro-input-area {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #fafafa;
}

.input-pro-channel {
  flex-shrink: 0;
  padding: 6px 8px;
  background: linear-gradient(180deg, #eceff1 0%, #1f1812 100%);
  border: 1px solid #b0bec5;
  border-radius: 3px;
  font-size: 11px;
  color: #00838f;
  min-width: 40px;
  text-align: center;
}

.chat-pro-input {
  flex: 1;
  padding: 7px 10px;
  background: #f5f5f5;
  border: 1px solid #b0bec5;
  border-radius: 3px;
  color: #d4c8b0;
  font-size: 13px;
  resize: none;
  outline: none;
  transition: all 0.2s;
  font-family: inherit;
  max-height: 60px;
}

.chat-pro-input:focus {
  border-color: #c9a96e;
  box-shadow: 0 0 8px rgba(201,169,110,0.2);
}

.chat-pro-input::placeholder {
  color: #b0bec5;
}

.chat-pro-send {
  flex-shrink: 0;
  padding: 7px 18px;
  background: linear-gradient(180deg, #00838f 0%, #a08050 100%);
  border: 1px solid #d4b878;
  border-radius: 3px;
  color: #fafafa;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-pro-send:hover {
  background: linear-gradient(180deg, #d4b878 0%, #b09060 100%);
  box-shadow: 0 0 10px rgba(201,169,110,0.4);
}

.chat-pro-send:active {
  transform: translateY(1px);
}

/* 玩家菜单 */
.chat-pro-player-menu {
  position: absolute;
  background: #1f1812;
  border: 1px solid #b0bec5;
  border-radius: 4px;
  padding: 6px 0;
  z-index: 200;
  min-width: 120px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

.menu-pro-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid #3a2f22;
}

.menu-pro-name {
  font-size: 13px;
  color: #263238;
  font-weight: bold;
}

.menu-pro-level {
  font-size: 11px;
  color: #8a7a6a;
}

.menu-pro-divider {
  height: 1px;
  background: #3a2f22;
  margin: 4px 0;
}

.menu-pro-item {
  display: block;
  width: 100%;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: #455a64;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}

.menu-pro-item:hover {
  background: rgba(201,169,110,0.1);
  color: #263238;
}

.menu-pro-item.danger {
  color: #cc7777;
}

.menu-pro-item.danger:hover {
  background: rgba(204,85,85,0.1);
}

/* ===== 水墨山水风格 - 图片图标补充样式 ===== */
.chat-pro-title-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 6px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.chat-pro-settings img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.chat-pro-settings:hover img {
  opacity: 1;
}

.quick-pro-btn img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.quick-pro-btn:hover img {
  opacity: 1;
}

.bar-pro-icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 4px;
}

.empty-pro-icon img {
  width: 32px;
  height: 32px;
  opacity: 0.4;
}

.hint-pro-icon img {
  width: 24px;
  height: 24px;
  opacity: 0.5;
}

/* 水墨山水风格 - 标题栏渐变优化 */
.chat-pro-header {
  background: linear-gradient(180deg, #f5f5f5 0%, #eeeeee 100%) !important;
  border-bottom: 1px solid #b0bec5 !important;
}

/* 水墨山水风格 - 频道栏优化 */
.chat-pro-channels {
  background: #f5f5f5 !important;
  border-bottom: 1px solid #cfd8dc !important;
}

.chat-pro-channel.active {
  color: #263238 !important;
  border-bottom: 2px solid #455a64 !important;
  background: rgba(69, 90, 100, 0.08) !important;
}

/* 水墨山水风格 - 消息区背景 */
.chat-pro-messages {
  background: #fafafa !important;
}

/* 水墨山水风格 - 输入区 */
.chat-pro-input-area {
  background: #f5f5f5 !important;
  border-top: 1px solid #cfd8dc !important;
}

.chat-pro-input {
  background: #ffffff !important;
  border: 1px solid #b0bec5 !important;
  color: #263238 !important;
}

.chat-pro-input:focus {
  border-color: #455a64 !important;
  box-shadow: 0 0 4px rgba(69, 90, 100, 0.2) !important;
}

/* 水墨山水风格 - 发送按钮 */
.chat-pro-send {
  background: linear-gradient(180deg, #607d8b, #455a64) !important;
  color: #ffffff !important;
  border: 1px solid #37474f !important;
}

.chat-pro-send:hover {
  background: linear-gradient(180deg, #78909c, #607d8b) !important;
  box-shadow: 0 0 8px rgba(69, 90, 100, 0.3) !important;
}

/* 水墨山水风格 - 玩家气泡 */
.msg-pro-bubble {
  background: #ffffff !important;
  border: 1px solid #cfd8dc !important;
  color: #263238 !important;
}

.msg-pro-self .msg-pro-bubble {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb) !important;
  border: 1px solid #90caf9 !important;
  color: #0d47a1 !important;
}

/* 水墨山水风格 - 系统消息 */
.msg-pro-system {
  border-left: 3px solid #546e7a !important;
  background: rgba(84, 110, 122, 0.06) !important;
  color: #37474f !important;
}

/* 水墨山水风格 - 传闻消息 */
.msg-pro-rumor {
  border-left: 3px solid #78909c !important;
  color: #546e7a !important;
  background: rgba(120, 144, 156, 0.05) !important;
}

/* 水墨山水风格 - 事件消息 */
.msg-pro-event {
  border: 1px solid #b0bec5 !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

.msg-pro-event-title {
  color: #006064 !important;
}

/* 水墨山水风格 - 在线人数绿点 */
.online-dot {
  background: #4caf50 !important;
  box-shadow: 0 0 4px #4caf50 !important;
}

/* 水墨山水风格 - 头像 */
.msg-pro-avatar {
  background: linear-gradient(135deg, #78909c, #455a64) !important;
  border: 2px solid #b0bec5 !important;
  color: #ffffff !important;
}

/* 水墨山水风格 - 滚动条 */
.chat-pro-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-pro-messages::-webkit-scrollbar-track {
  background: #f5f5f5;
}

.chat-pro-messages::-webkit-scrollbar-thumb {
  background: #cfd8dc;
  border-radius: 3px;
}

.chat-pro-messages::-webkit-scrollbar-thumb:hover {
  background: #b0bec5;
}

/* 水墨山水风格 - 快捷栏 */
.chat-pro-quickbar {
  background: #f5f5f5 !important;
  border-top: 1px solid #e0e0e0 !important;
}

/* 水墨山水风格 - 队伍/私聊信息栏 */
.chat-pro-team-bar,
.chat-pro-private-bar {
  background: linear-gradient(180deg, #f5f5f5, #eeeeee) !important;
  border: 1px solid #cfd8dc !important;
}


/* ===== 源码原始风格 - 聊天区域样式 ===== */
.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(245, 240, 230, 0.88);
  backdrop-filter: blur(4px);
}

.chat-channels {
  display: flex;
  background: linear-gradient(180deg, rgba(139,115,85,0.15), rgba(139,115,85,0.08));
  border-bottom: 1px solid rgba(139, 115, 85, 0.3);
  flex-shrink: 0;
}

.chat-channel {
  padding: 14px 20px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-gray);
  cursor: pointer;
  letter-spacing: 2px;
  position: relative;
  transition: all 0.3s;
}

.chat-channel.active {
  color: var(--ink-black);
  background: rgba(255,255,255,0.5);
}

.chat-channel.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--vermilion);
}

.chat-channel-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  background: var(--vermilion);
  color: #fff;
  font-size: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat-msg {
  display: flex;
  gap: 12px;
  max-width: 85%;
  animation: msgIn 0.3s ease;
}

.chat-msg.self {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-msg-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 2px solid var(--gold);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.chat-msg-avatar-img {
  width: 100%;
  height: 100%;
  background-image: var(--img-avatars);
  background-size: 400% 400%;
  background-repeat: no-repeat;
}

.chat-msg-body {
  flex: 1;
  min-width: 0;
}

.chat-msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.chat-msg.self .chat-msg-meta {
  justify-content: flex-end;
}

.chat-msg-sender {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-black);
  letter-spacing: 1px;
}

.chat-msg-time {
  font-size: 11px;
  color: var(--ink-light);
}

.chat-msg-level {
  font-size: 11px;
  padding: 1px 5px;
  background: rgba(184, 134, 11, 0.15);
  color: var(--gold);
  letter-spacing: 1px;
  border-radius: 2px;
}

.chat-msg-bubble {
  padding: 10px 14px;
  background: #fff;
  border: 1px solid rgba(139, 115, 85, 0.2);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-deep);
  letter-spacing: 0.5px;
  display: inline-block;
  word-break: break-word;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.chat-msg.self .chat-msg-bubble {
  background: linear-gradient(180deg, #c23a2b, #9e2d20);
  color: var(--paper);
  border-color: var(--vermilion-deep);
  box-shadow: 0 2px 10px rgba(194, 58, 43, 0.2);
}

.chat-msg.system {
  align-self: center;
  max-width: 90%;
  text-align: center;
}

.chat-msg.system .chat-msg-bubble {
  background: rgba(194, 58, 43, 0.08);
  border: 1px solid rgba(194, 58, 43, 0.2);
  color: var(--vermilion-deep);
  font-size: 13px;
  box-shadow: none;
}

.chat-msg.event .chat-msg-bubble {
  background: linear-gradient(135deg, rgba(184, 134, 11, 0.08), rgba(184, 134, 11, 0.04));
  border: 1px solid rgba(184, 134, 11, 0.3);
  color: var(--ink-deep);
}

.chat-input-area {
  border-top: 1px solid rgba(139, 115, 85, 0.3);
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.8));
  padding: 12px 16px;
  flex-shrink: 0;
}

.chat-input-wrapper {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.chat-input {
  flex: 1;
  min-height: 48px;
  max-height: 120px;
  padding: 12px 14px;
  border: 1px solid rgba(139, 115, 85, 0.3);
  font-family: var(--font-body);
  font-size: 14px;
  resize: none;
  line-height: 1.6;
  color: var(--ink-black);
  transition: all 0.3s;
  letter-spacing: 0.5px;
  background: rgba(255,255,255,0.9);
  border-radius: 4px;
}

.chat-input:focus {
  outline: none;
  border-color: var(--vermilion);
  box-shadow: 0 0 0 3px rgba(194, 58, 43, 0.08);
  background: #fff;
}

.chat-send-btn {
  padding: 0 24px;
  height: 48px;
  background: linear-gradient(180deg, #d44535, #b83324);
  color: #fff;
  border: 1px solid var(--vermilion-deep);
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 4px;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(194,58,43,0.3);
}

.chat-send-btn:hover {
  background: linear-gradient(180deg, #e05040, #c23a2b);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(194,58,43,0.4);
}

.chat-quick-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.25);
  border-top: 1px solid rgba(139,115,85,0.2);
  border-bottom: 1px solid rgba(139,115,85,0.2);
}

.chat-quick-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-quick-label {
  font-family: 'Ma Shan Zheng', 'ZCOOL XiaoWei', serif;
  font-size: 12px;
  color: #daa520;
  letter-spacing: 2px;
  min-width: 32px;
}

.chat-quick-slots {
  display: flex;
  gap: 5px;
}

.chat-quick-slot {
  width: 38px;
  height: 38px;
  border: 2px solid;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  background: linear-gradient(135deg, rgba(139,115,85,0.2), rgba(0,0,0,0.3));
}

.chat-quick-slot:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}

.chat-quick-skill {
  border-color: #daa520;
}

.chat-quick-skill:hover {
  border-color: #ffd700;
  box-shadow: 0 3px 10px rgba(218,165,32,0.4);
}

.chat-quick-potion {
  border-color: #4a7c59;
}

.chat-quick-potion:hover {
  border-color: #6a9c79;
  box-shadow: 0 3px 10px rgba(74,124,89,0.4);
}

.chat-quick-name {
  font-size: 10px;
  color: #f5f0e6;
  font-family: 'Ma Shan Zheng', 'ZCOOL XiaoWei', serif;
  letter-spacing: 1px;
  line-height: 1.1;
}

.chat-quick-lv {
  font-size: 8px;
  color: #daa520;
  position: absolute;
  bottom: 1px;
  right: 2px;
  font-weight: 600;
}

.chat-quick-count {
  font-size: 8px;
  color: #e05040;
  position: absolute;
  bottom: 1px;
  right: 2px;
  font-weight: 600;
}

.chat-quick-empty {
  font-size: 10px;
  color: rgba(139,115,85,0.5);
}

.chat-quick-divider {
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, transparent, rgba(139,115,85,0.5), transparent);
}


/* ===== 聊天新增功能样式 ===== */
.chat-channel-settings {
  padding: 14px 12px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.chat-channel-settings:hover {
  background: rgba(255,255,255,0.5);
}

.chat-settings-panel {
  position: absolute;
  top: 50px;
  right: 10px;
  background: #fff;
  border: 1px solid rgba(139,115,85,0.3);
  border-radius: 4px;
  padding: 12px;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  min-width: 180px;
}
.chat-settings-header {
  font-weight: bold;
  color: #1a1a1a;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(139,115,85,0.2);
}
.chat-settings-group {
  margin-bottom: 8px;
}
.chat-settings-title {
  font-size: 12px;
  color: #8a8a8a;
  margin-bottom: 4px;
}
.chat-settings-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #2c2c2c;
  padding: 3px 0;
  cursor: pointer;
}
.chat-clear-btn {
  width: 100%;
  padding: 6px;
  background: rgba(194,58,43,0.1);
  border: 1px solid rgba(194,58,43,0.3);
  color: #c23a2b;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  margin-top: 4px;
}
.chat-clear-btn:hover {
  background: rgba(194,58,43,0.2);
}

.chat-empty {
  text-align: center;
  padding: 40px 20px;
  color: #8a8a8a;
}
.chat-empty-text {
  font-size: 14px;
  letter-spacing: 2px;
}

.chat-team-bar, .chat-private-bar {
  background: rgba(139,115,85,0.08);
  border: 1px solid rgba(139,115,85,0.2);
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.chat-team-info, .chat-private-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.chat-team-title, .chat-private-title {
  font-weight: bold;
  color: #1a1a1a;
  font-size: 13px;
}
.chat-team-leader, .chat-private-target {
  font-size: 12px;
  color: #5a5a5a;
}
.chat-team-members {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.chat-team-member {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(255,255,255,0.7);
  border-radius: 10px;
  color: #2c2c2c;
}
.chat-team-member.self {
  background: rgba(194,58,43,0.1);
  color: #c23a2b;
}
.chat-team-leave, .chat-private-close {
  padding: 4px 12px;
  background: rgba(194,58,43,0.1);
  border: 1px solid rgba(194,58,43,0.3);
  color: #c23a2b;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}
.chat-team-leave:hover, .chat-private-close:hover {
  background: rgba(194,58,43,0.2);
}

.chat-empty-hint {
  text-align: center;
  padding: 20px;
  color: #8a8a8a;
}
.chat-empty-hint-text {
  font-size: 14px;
  margin-bottom: 4px;
}
.chat-empty-hint-sub {
  font-size: 12px;
  color: #aaa;
}

.chat-event-choice {
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 5px 14px;
  background: linear-gradient(180deg, #d4a017, #b8860b);
  color: #fff;
  border: 1px solid #9a7209;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}
.chat-event-choice:hover {
  background: linear-gradient(180deg, #e0b020, #c99615);
  transform: translateY(-1px);
}

.chat-msg-sect {
  font-size: 11px;
  color: #4a7c59;
  padding: 0 4px;
}
.chat-msg-private-to {
  font-size: 11px;
  color: #8a8a8a;
}

.chat-input-tool {
  width: 36px;
  height: 48px;
  background: rgba(139,115,85,0.1);
  border: 1px solid rgba(139,115,85,0.2);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.chat-input-tool:hover {
  background: rgba(139,115,85,0.2);
}

.chat-emoji-panel {
  position: absolute;
  bottom: 70px;
  left: 16px;
  background: #fff;
  border: 1px solid rgba(139,115,85,0.3);
  border-radius: 4px;
  padding: 10px;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  max-width: 280px;
}
.chat-emoji-item {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}
.chat-emoji-item:hover {
  background: rgba(139,115,85,0.1);
}
.chat-emoji-item img {
  width: 28px;
  height: 28px;
}

.chat-phrase-panel {
  position: absolute;
  bottom: 70px;
  left: 60px;
  background: #fff;
  border: 1px solid rgba(139,115,85,0.3);
  border-radius: 4px;
  padding: 8px;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  min-width: 180px;
}
.chat-phrase-item {
  padding: 6px 10px;
  font-size: 13px;
  color: #2c2c2c;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.2s;
}
.chat-phrase-item:hover {
  background: rgba(139,115,85,0.1);
}

.chat-player-menu {
  position: fixed;
  background: #fff;
  border: 1px solid rgba(139,115,85,0.3);
  border-radius: 4px;
  padding: 8px 0;
  z-index: 99999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  min-width: 150px;
  max-width: 180px;
  transform: translateZ(0);
  will-change: transform;
}
.chat-player-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(139,115,85,0.2);
}
.chat-player-menu-name {
  font-weight: bold;
  color: #1a1a1a;
  font-size: 14px;
}
.chat-player-menu-level {
  font-size: 12px;
  color: #b8860b;
}
.chat-player-menu-divider {
  height: 1px;
  background: rgba(139,115,85,0.15);
  margin: 4px 0;
}
.chat-player-menu-item {
  display: block;
  width: 100%;
  padding: 7px 12px;
  background: none;
  border: none;
  text-align: left;
  font-size: 13px;
  color: #2c2c2c;
  cursor: pointer;
  transition: background 0.2s;
}
.chat-player-menu-item:hover {
  background: rgba(139,115,85,0.1);
}
.chat-player-menu-item.danger {
  color: #c23a2b;
}
.chat-player-menu-item.danger:hover {
  background: rgba(194,58,43,0.1);
}

/* 消息进入动画 */
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-msg {
  animation: msgIn 0.3s ease;
}

/* 滚动条美化 */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}
.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(139,115,85,0.3);
  border-radius: 3px;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(139,115,85,0.5);
}


/* ===== 武侠风格底部功能栏 ===== */
.chat-bottom-bar {
  position: relative;
  height: 130px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  overflow: visible;
}
.chat-bottom-bg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1080px;
  height: 135px;
  background: url("../assets/img/chat/bottom-bar-v2.png") no-repeat center;
  background-size: 100% 100%;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

/* 左侧角色状态 */
.chat-bottom-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
  z-index: 1;
  position: relative;
}
.chat-bottom-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e05040, #c23a2b 50%, #7a1a1a);
  border: 2px solid #d4a017;
  box-shadow: 0 0 12px rgba(224,80,64,0.4), inset 0 0 15px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.chat-bottom-avatar::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(80,144,255,0.6), rgba(43,111,194,0.4) 50%, transparent);
}
.chat-bottom-stats {
  flex: 1;
  min-width: 0;
}
.chat-bottom-name {
  font-size: 12px;
  color: #f0c040;
  font-weight: bold;
  margin-bottom: 3px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.chat-bottom-lv {
  font-size: 10px;
  color: #c4b89a;
  font-weight: normal;
}
.chat-bottom-hp-bar,
.chat-bottom-mp-bar {
  position: relative;
  height: 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(90,42,42,0.6);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 2px;
}
.chat-bottom-mp-bar {
  border-color: rgba(42,74,106,0.6);
}
.chat-bottom-hp-fill {
  height: 100%;
  background: linear-gradient(180deg, #e05040, #c23a2b);
  border-radius: 5px;
  transition: width 0.3s ease;
}
.chat-bottom-mp-fill {
  height: 100%;
  background: linear-gradient(180deg, #4080e0, #2b6fc2);
  border-radius: 5px;
  transition: width 0.3s ease;
}
.chat-bottom-bar-text {
  position: absolute;
  top: 0; left: 0; right: 0;
  text-align: center;
  font-size: 9px;
  color: #fff;
  line-height: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* 中间技能丹药栏 */
.chat-bottom-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 1;
  position: relative;
  min-width: 0;
}
.chat-bottom-skills {
  display: flex;
  gap: 5px;
}
.chat-bottom-skill {
  width: 42px;
  height: 42px;
  border: 2px solid #8a7a3a;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(42,32,24,0.9), rgba(26,20,16,0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #d4a017;
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 6px rgba(0,0,0,0.3);
  transition: all 0.2s;
}
.chat-bottom-skill:hover {
  border-color: #f0c040;
  box-shadow: 0 0 10px rgba(240,192,64,0.5);
  transform: translateY(-2px);
}
.chat-bottom-skill-key {
  position: absolute;
  top: 1px; left: 3px;
  font-size: 8px;
  color: #f0c040;
  font-weight: bold;
}
.chat-bottom-skill-icon {
  font-size: 12px;
  text-align: center;
}
.chat-bottom-skill-lv {
  position: absolute;
  bottom: 1px; right: 3px;
  font-size: 8px;
  color: #e05040;
  font-weight: bold;
}
.chat-bottom-divider {
  width: 2px;
  height: 36px;
  background: linear-gradient(180deg, transparent, #5a4a35, transparent);
}
.chat-bottom-potions {
  display: flex;
  gap: 5px;
}
.chat-bottom-potion {
  width: 36px;
  height: 36px;
  border: 2px solid #4a7c59;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(26,46,30,0.9), rgba(13,26,16,0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #6a9c79;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}
.chat-bottom-potion:hover {
  border-color: #7ac89a;
  box-shadow: 0 0 8px rgba(106,156,121,0.5);
  transform: translateY(-2px);
}
.chat-bottom-potion-icon {
  font-size: 11px;
}
.chat-bottom-potion-count {
  position: absolute;
  bottom: 1px; right: 2px;
  font-size: 8px;
  color: #e05040;
  font-weight: bold;
}
.chat-bottom-empty {
  font-size: 11px;
  color: #6a5a4a;
  padding: 0 8px;
}

/* 右侧输入区 */
.chat-bottom-right {
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
  position: relative;
}
.chat-bottom-tools {
  display: flex;
  gap: 4px;
}
.chat-bottom-tool {
  width: 26px;
  height: 24px;
  background: rgba(139,115,85,0.25);
  border: 1px solid #5a4a35;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.chat-bottom-tool:hover {
  background: rgba(139,115,85,0.4);
  border-color: #8a7a5a;
}
.chat-bottom-input-row {
  display: flex;
  gap: 6px;
}
.chat-bottom-input {
  flex: 1;
  height: 28px;
  background: rgba(0,0,0,0.5);
  border: 1px solid #8a7a3a;
  border-radius: 4px;
  padding: 5px 8px;
  color: #e4d8ba;
  font-size: 12px;
  outline: none;
  resize: none;
  font-family: inherit;
  line-height: 18px;
}
.chat-bottom-input:focus {
  border-color: #d4a017;
  box-shadow: 0 0 6px rgba(212,160,23,0.3);
}
.chat-bottom-input::placeholder {
  color: #7a6a5a;
}
.chat-bottom-send {
  height: 28px;
  padding: 0 14px;
  background: linear-gradient(180deg, #c23a2b, #9e2d20);
  color: #fff;
  border: 1px solid #7a1f15;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 2px;
  transition: all 0.2s;
}
.chat-bottom-send:hover {
  background: linear-gradient(180deg, #d44a3b, #b03d30);
  box-shadow: 0 0 8px rgba(194,58,43,0.4);
}

/* 响应式 */
@media (max-width: 900px) {
  .chat-bottom-bar {
    flex-wrap: wrap;
    height: auto;
    padding: 10px;
  }
  .chat-bottom-bg {
    display: none;
  }
  .chat-bottom-left,
  .chat-bottom-center,
  .chat-bottom-right {
    width: 100%;
    justify-content: center;
  }
}


/* ===== 武侠卷轴底部栏 ===== */
.scroll-bottom-bar {
  position: relative;
  background: linear-gradient(180deg,#f8f2e6,#ede3d0);
  border: 3px solid #8b7355;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  margin: 6px 0 0 0;
  min-height: 130px;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 8px rgba(139,115,85,0.2);
}
.scroll-bottom-bar::before, .scroll-bottom-bar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 14px;
  background: linear-gradient(180deg,#a08060 0%,#6b5344 30%,#8b7355 50%,#6b5344 70%,#a08060 100%);
  border: 2px solid #5a4535;
  z-index: 1;
}
.scroll-bottom-bar::before { left: -14px; border-radius: 6px 0 0 6px; }
.scroll-bottom-bar::after { right: -14px; border-radius: 0 6px 6px 0; }
.scroll-cap-top, .scroll-cap-bottom {
  position: absolute;
  width: 22px; height: 12px;
  background: linear-gradient(180deg,#b89868,#7a5a3a);
  border: 2px solid #5a4535;
  border-radius: 4px;
  z-index: 2;
}
.scroll-cap-top { top: 0; }
.scroll-cap-bottom { bottom: 0; }
.cap-left { left: -18px; }
.cap-right { right: -18px; }
.deco-line {
  position: absolute; top: 7px; left: 28px; right: 28px; height: 1px;
  background: linear-gradient(90deg,transparent,rgba(139,115,85,0.4),transparent);
}
.deco-line-bottom {
  position: absolute; bottom: 7px; left: 28px; right: 28px; height: 1px;
  background: linear-gradient(90deg,transparent,rgba(139,115,85,0.4),transparent);
}

/* 左侧角色状态 */
.scroll-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  max-width: 230px;
  flex-shrink: 1;
  z-index: 2;
  position: relative;
}
.scroll-avatar {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 3px solid #b8860b;
  background: radial-gradient(circle at 35% 30%,#e8c870,#b8860b 50%,#8b6508);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 0 12px rgba(184,134,11,0.4);
  position: relative;
  flex-shrink: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.scroll-avatar-lv {
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg,#c23a2b,#8b2015);
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid #7a1f15;
  white-space: nowrap;
}
.buff-icons {
  position: absolute;
  top: -6px; right: -6px;
  display: flex;
  gap: 2px;
}
.buff-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid #b8860b;
  background: radial-gradient(circle,#70c870,#408040);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  box-shadow: 0 0 4px rgba(112,200,112,0.5);
}
.scroll-stats { flex: 1; min-width: 0; }
.scroll-name {
  font-size: 13px;
  color: #5a3a1a;
  font-weight: bold;
  margin-bottom: 3px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  gap: 6px;
}
.scroll-name .sect-tag {
  font-size: 10px;
  color: #8b4513;
  font-weight: normal;
  background: rgba(139,69,19,0.1);
  padding: 1px 4px;
  border-radius: 3px;
}
.stat-bar {
  position: relative;
  height: 12px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 2px;
}
.stat-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}
.stat-bar-text {
  position: absolute;
  top: 0; left: 0; right: 0;
  text-align: center;
  font-size: 8px;
  color: #fff;
  line-height: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  font-weight: bold;
}
.stat-bar-hp { background: #e8d0c0; border: 1px solid #a05040; }
.stat-bar-hp .stat-bar-fill { background: linear-gradient(180deg,#e05040,#b03020); }
.stat-bar-mp { background: #c0d0e8; border: 1px solid #4060a0; }
.stat-bar-mp .stat-bar-fill { background: linear-gradient(180deg,#5080e0,#3050b0); }
.stat-bar-xiu { background: #d8c8e8; border: 1px solid #7050a0; }
.stat-bar-xiu .stat-bar-fill { background: linear-gradient(180deg,#9060d0,#6030a0); }
.stat-bar-exp { background: #e8e0c0; border: 1px solid #a08040; height: 12px; margin-top: 3px; }
.stat-bar-exp .stat-bar-fill { background: linear-gradient(90deg,#d4a017,#f0c040); }
.stat-bar-exp .stat-bar-text { font-size: 8px; line-height: 12px; color: #4a3a0a; text-shadow: 0 1px 0 rgba(255,255,255,.35); }

.scroll-divider {
  width: 2px;
  height: 90px;
  background: linear-gradient(180deg,transparent,#8b7355 20%,#8b7355 80%,transparent);
  flex-shrink: 0;
}

/* 中间技能丹药 */
.scroll-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 2;
  position: relative;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}
.scroll-center::-webkit-scrollbar { display: none; }
.scroll-skills { display: flex; gap: 3px; flex-shrink: 1; min-width: 0; }
.scroll-skill {
  width: 34px; height: 38px;
  border: 2px solid #8b7355;
  border-radius: 5px;
  background: linear-gradient(135deg,#f0e8d8,#d8c8a8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #5a3a1a;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.2);
  transition: all 0.2s;
}
.scroll-skill:hover {
  border-color: #b8860b;
  background: linear-gradient(135deg,#f8f0e0,#e8d8b8);
  box-shadow: 0 0 10px rgba(184,134,11,0.4), 0 3px 6px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}
.scroll-skill-key {
  position: absolute;
  top: 1px; left: 3px;
  font-size: 8px;
  color: #8b4513;
  font-weight: bold;
}
.scroll-skill-lv {
  position: absolute;
  bottom: 1px; right: 3px;
  font-size: 8px;
  color: #c23a2b;
  font-weight: bold;
}
.scroll-potions { display: flex; gap: 3px; flex-wrap: nowrap; flex-shrink: 1; min-width: 0; }
.scroll-potion {
  width: 30px; height: 34px;
  border: 2px solid #5a7a4a;
  border-radius: 5px;
  background: linear-gradient(135deg,#e0ecd8,#c0d8b0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #3a5a2a;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.2);
  transition: all 0.2s;
}
.scroll-potion:hover {
  border-color: #7aaa5a;
  box-shadow: 0 0 8px rgba(122,170,90,0.4);
  transform: translateY(-2px);
}
.scroll-potion-icon {
  width: 30px; height: 30px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  pointer-events: none;
}
.scroll-potion-txt {
  font-size: 13px;
  font-weight: bold;
}
.scroll-potion-count {
  position: absolute;
  bottom: 0px; right: 2px;
  font-size: 9px;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 0 2px rgba(0,0,0,0.6);
}
.scroll-potion-key {
  position: absolute;
  top: 0px; left: 2px;
  font-size: 8px;
  color: #f0c040;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 0 2px rgba(0,0,0,0.5);
}
.scroll-potion-more {
  width: 30px; height: 34px;
  border: 2px dashed #5a7a4a;
  border-radius: 5px;
  background: rgba(224,236,216,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: #3a5a2a;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s;
}
.scroll-potion-more:hover {
  border-color: #7aaa5a;
  border-style: solid;
  box-shadow: 0 0 8px rgba(122,170,90,0.4);
  transform: translateY(-2px);
}
.scroll-potion-edit {
  width: 30px; height: 34px;
  border: 2px solid #8b7355;
  border-radius: 5px;
  background: linear-gradient(135deg,#f0e8d8,#d8c8a8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #5a3a1a;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s;
}
.scroll-potion-edit:hover {
  border-color: #b8860b;
  box-shadow: 0 0 8px rgba(184,134,11,0.4);
  transform: translateY(-2px);
}
.scroll-potion-empty {
  border-style: dashed;
  background: rgba(224,236,216,0.5);
}
.scroll-potion-tip {
  font-size: 9px;
  color: #8b7355;
  align-self: center;
  white-space: nowrap;
  writing-mode: vertical-lr;
  letter-spacing: 1px;
}
.scroll-potion-dragging {
  opacity: 0.3;
  border-color: #f0c040;
}
.scroll-potion-droptarget {
  border-color: #f0c040;
  border-style: dashed;
  box-shadow: 0 0 10px rgba(240,192,64,0.5);
  transform: scale(1.08);
}
.potion-drag-ghost {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  width: 46px; height: 46px;
  border-radius: 6px;
  border: 2px solid #f0c040;
  background: rgba(35,25,12,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
  transform: translate(-50%, -50%);
}
.potion-drag-ghost img {
  width: 38px; height: 38px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.potion-drag-ghost span {
  color: #f0c040;
  font-size: 14px;
  font-weight: bold;
}
.scroll-potion-del {
  position: absolute;
  top: -6px; right: -6px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #c23a2b;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 15px;
  text-align: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.scroll-potion-del:hover { background: #e04a3b; }
.scroll-potion-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}
.scroll-potion-save {
  padding: 4px 8px;
  border-radius: 4px;
  background: linear-gradient(135deg,#d9a53a,#b8860b);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.scroll-potion-save:hover { background: linear-gradient(135deg,#e8b84a,#c9961b); }
.scroll-potion-cancel {
  padding: 4px 8px;
  border-radius: 4px;
  background: linear-gradient(135deg,#a89878,#8b7355);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.scroll-potion-cancel:hover { background: linear-gradient(135deg,#b8a888,#9b8355); }

/* 丹药选择面板 */
.potion-picker {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  max-height: 300px;
  background: rgba(35,25,12,0.98);
  border: 1px solid #b8860b;
  border-radius: 8px;
  padding: 10px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.potion-picker-title {
  color: #f0c040;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}
.potion-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 230px;
  overflow-y: auto;
  padding: 4px;
}
.potion-picker-item {
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 4px;
  border: 1px solid rgba(184,134,11,0.4);
  border-radius: 6px;
  background: rgba(60,45,20,0.6);
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}
.potion-picker-item:hover {
  border-color: #f0c040;
  background: rgba(90,65,28,0.8);
  transform: translateY(-2px);
}
.potion-picker-item img {
  width: 40px; height: 40px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.potion-picker-name {
  font-size: 10px;
  color: #e8d8b8;
  white-space: nowrap;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.potion-picker-count {
  position: absolute;
  top: 3px; right: 3px;
  font-size: 9px;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.potion-picker-empty {
  color: #a89878;
  font-size: 12px;
  padding: 16px;
  text-align: center;
  width: 100%;
}
.potion-picker-close {
  text-align: center;
  color: #a89878;
  font-size: 11px;
  cursor: pointer;
  padding: 3px;
  border-top: 1px solid rgba(184,134,11,0.3);
}
.potion-picker-close:hover { color: #f0c040; }

/* Tooltip */
.scroll-skill .tooltip, .scroll-potion .tooltip, .scroll-potion-more .tooltip, .scroll-potion-edit .tooltip {
  visibility: hidden;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30,20,10,0.95);
  border: 1px solid #b8860b;
  border-radius: 5px;
  padding: 6px 10px;
  font-size: 11px;
  color: #e8d8b8;
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.scroll-skill .tooltip::after, .scroll-potion .tooltip::after, .scroll-potion-more .tooltip::after, .scroll-potion-edit .tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #b8860b;
}
.scroll-skill:hover .tooltip, .scroll-potion:hover .tooltip, .scroll-potion-more:hover .tooltip, .scroll-potion-edit:hover .tooltip { visibility: visible; }
.tooltip .tt-name { color: #f0c040; font-weight: bold; font-size: 12px; margin-bottom: 2px; }
.tooltip .tt-desc { color: #a89878; font-size: 10px; }
.tooltip .tt-cd { color: #7ec8e3; font-size: 10px; margin-top: 2px; }

/* 右侧输入区 */
.scroll-right {
  min-width: 150px;
  flex: 1 1 200px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 2;
  position: relative;
}

/* 私聊锁定条 */
.private-lock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(90deg,rgba(194,58,43,0.12),rgba(194,58,43,0.04));
  border: 1px solid rgba(194,58,43,0.3);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
}
.private-lock-bar .lock-icon { color: #c23a2b; font-size: 11px; }
.private-lock-bar .lock-label { color: #5a3a1a; }
.private-lock-bar .lock-name { color: #c23a2b; font-weight: bold; cursor: pointer; }
.private-lock-bar .lock-name:hover { text-decoration: underline; }
.private-lock-bar .lock-close {
  margin-left: auto;
  cursor: pointer;
  color: #8b7355;
  font-size: 12px;
  padding: 0 3px;
}
.private-lock-bar .lock-close:hover { color: #c23a2b; }

.private-hint-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(139,115,85,0.08);
  border: 1px dashed rgba(139,115,85,0.3);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 10px;
  color: #8b7355;
}
.private-hint-bar .hint-icon { font-size: 11px; }

/* 工具按钮 */
.scroll-tools {
  display: flex;
  gap: 4px;
  align-items: center;
}
.scroll-tool {
  width: 26px; height: 24px;
  background: rgba(139,115,85,0.15);
  border: 1px solid #8b7355;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #8b4513;
  transition: all 0.2s;
  padding: 0;
}
.scroll-tool:hover {
  background: rgba(139,115,85,0.3);
  border-color: #b8860b;
}
.tool-meditate {
  width: auto;
  padding: 0 8px;
  background: linear-gradient(180deg,rgba(112,200,112,0.2),rgba(64,128,64,0.15));
  border-color: #5a8a4a;
  color: #4a7a3a;
  font-size: 10px;
  gap: 3px;
}
.tool-meditate:hover {
  background: linear-gradient(180deg,rgba(112,200,112,0.3),rgba(64,128,64,0.25));
  border-color: #7aaa5a;
}
.tool-meditate.active {
  background: linear-gradient(180deg,#70c870,#408040);
  color: #fff;
  border-color: #306030;
  box-shadow: 0 0 8px rgba(112,200,112,0.5);
}

/* 输入框 */
.scroll-input-row {
  display: flex;
  gap: 5px;
}
.scroll-input {
  flex: 1;
  height: 28px;
  min-height: 28px;
  max-height: 60px;
  background: rgba(255,255,255,0.7);
  border: 1px solid #8b7355;
  border-radius: 5px;
  padding: 5px 10px;
  color: #3a2a1a;
  font-size: 12px;
  outline: none;
  resize: none;
  transition: all 0.2s;
  font-family: inherit;
  line-height: 18px;
}
.scroll-input:focus {
  border-color: #b8860b;
  box-shadow: 0 0 6px rgba(184,134,11,0.3);
  background: rgba(255,255,255,0.9);
}
.scroll-input.private-mode {
  border-color: #c23a2b;
  background: rgba(255,240,235,0.8);
}
.scroll-input::placeholder { color: #a09070; }
.scroll-send {
  height: 28px;
  padding: 0 14px;
  background: linear-gradient(180deg,#c23a2b,#9e2d20);
  color: #fff;
  border: 1px solid #7a1f15;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 2px;
  font-weight: bold;
  transition: all 0.2s;
}
.scroll-send:hover {
  background: linear-gradient(180deg,#d44a3b,#b03d30);
  box-shadow: 0 2px 8px rgba(194,58,43,0.4);
}

/* 频道未读红点 */
.chat-channel { position: relative; }
.chat-channel .unread-dot {
  position: absolute;
  top: 2px; right: 4px;
  width: 7px; height: 7px;
  background: #e04030;
  border-radius: 50%;
  border: 1px solid #fff;
  animation: pulse 1.5s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

/* ===== 世界频道喊话 ===== */
.whisper-lock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(180, 120, 40, 0.25), rgba(140, 90, 30, 0.15));
  border: 1px solid rgba(180, 120, 40, 0.5);
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 12px;
}
.whisper-lock-bar .lock-icon { font-size: 14px; }
.whisper-lock-bar .lock-label { color: #8b6914; }
.whisper-lock-bar .lock-name {
  color: #b8860b;
  font-weight: bold;
  padding: 1px 6px;
  background: rgba(184, 134, 11, 0.15);
  border-radius: 3px;
}
.whisper-lock-bar .lock-close {
  margin-left: auto;
  cursor: pointer;
  color: #999;
  padding: 0 4px;
}
.whisper-lock-bar .lock-close:hover { color: #c23a2b; }

.chat-msg-whisper-to {
  color: #b8860b;
  font-size: 11px;
  margin-left: 6px;
  padding: 1px 5px;
  background: rgba(184, 134, 11, 0.12);
  border-radius: 3px;
}

.scroll-input.whisper-mode {
  border-color: rgba(184, 134, 11, 0.6) !important;
  background: rgba(255, 248, 230, 0.95) !important;
}

/* 顶部栏无用户信息布局 */
.topbar-no-userinfo {
    justify-content: space-between !important;
    padding: 0 20px !important;
}
.topbar-left-weather {
    display: flex;
    align-items: center;
    gap: 12px;
}


/* ===== 底部空白条全局修复 ===== */
.game-page, .game-main, .chat-container, .chat-messages, .scroll-bottom-bar {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.game-page {
  overflow: hidden !important;
}
.game-main {
  overflow: hidden !important;
}
.chat-container {
  overflow: hidden !important;
}


/* ============================================================
   【权威最终布局定义 - 禁止覆盖】
   底部空白条根本原因：同一选择器重复定义太多，后面覆盖前面。
   此区块为最终生效定义，所有布局属性使用!important。
   ============================================================ */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: auto !important;
}

#root {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow-y: auto !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
}

.game-page {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
}

.game-topbar {
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 24px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  height: 56px !important;
}

.game-main {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 56px) !important;
  height: calc(100vh - 56px) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
}

.chat-container {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
}

.chat-channels {
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.chat-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  margin: 0 !important;
}

.scroll-bottom-bar {
  flex-shrink: 0 !important;
  margin: 6px 0 0 0 !important;
  padding: 0 12px !important;
  min-height: 130px !important;
  max-height: 130px !important;
  height: 130px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* 所有子元素box-sizing统一 */
.game-page *, .game-page *::before, .game-page *::after {
  box-sizing: border-box !important;
}


/* ===== 装备独立图标样式 ===== */
.equip-icon-img {
  background-image: none !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

.item-large-icon-img {
  background-image: none !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}


/* ===== 在线玩家卡片式UI ===== */
.online-title-text {
  font-size: 13px;
  color: #5a4a3a;
  letter-spacing: 2px;
  font-weight: 600;
}

.online-count-badge {
  background: linear-gradient(135deg, #c9a96e, #b8944f);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 24px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(201, 169, 110, 0.3);
}

/* 搜索框 */
.online-search-box {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(139, 115, 85, 0.2);
}

.online-search-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid rgba(139, 115, 85, 0.3);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  color: #5a4a3a;
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
}

.online-search-input:focus {
  border-color: #c9a96e;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 4px rgba(201, 169, 110, 0.3);
}

.online-search-input::placeholder {
  color: #aaa;
}

/* 筛选标签 */
.online-filter-tabs {
  display: flex;
  padding: 6px 10px;
  gap: 6px;
  border-bottom: 1px solid rgba(139, 115, 85, 0.2);
}

.online-filter-tab {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid rgba(139, 115, 85, 0.3);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  color: #8b7355;
  cursor: pointer;
  transition: all 0.2s;
}

.online-filter-tab:hover {
  background: rgba(201, 169, 110, 0.2);
}

.online-filter-tab.active {
  background: linear-gradient(135deg, #c9a96e, #b8944f);
  color: #fff;
  border-color: #c9a96e;
}

/* 玩家卡片列表 */
.online-card-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 单个玩家卡片 */
.online-player-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(139, 115, 85, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.online-player-card:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: #c9a96e;
  box-shadow: 0 2px 8px rgba(201, 169, 110, 0.3);
  transform: translateY(-1px);
}

.online-player-card.self {
  border: 2px solid #c9a96e;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.15), rgba(201, 169, 110, 0.05));
  box-shadow: 0 0 8px rgba(201, 169, 110, 0.3);
}

/* 头像 */
.online-player-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar-char {
  font-size: 16px;
  font-weight: bold;
  font-family: "STKaiti", "KaiTi", serif;
}

.online-status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
}

/* 玩家信息 */
.online-player-info {
  flex: 1;
  min-width: 0;
}

.online-player-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.online-player-name {
  font-size: 13px;
  color: #3a2a1a;
  font-weight: 600;
  letter-spacing: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-player-level {
  font-size: 11px;
  font-weight: 600;
  font-family: "STKaiti", "KaiTi", serif;
}

.online-player-sect-row {
  display: flex;
  gap: 4px;
}

.online-sect-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 1px;
}


/* ===== 在线玩家增强版卡片样式 ===== */
.online-player-card-enhanced {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(139, 115, 85, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.online-player-card-enhanced:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: #c9a96e;
  box-shadow: 0 2px 8px rgba(201, 169, 110, 0.3);
  transform: translateY(-1px);
}

.online-player-card-enhanced.self {
  border: 2px solid #c9a96e;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.15), rgba(201, 169, 110, 0.05));
  box-shadow: 0 0 8px rgba(201, 169, 110, 0.3);
}

/* 大头像 */
.online-player-avatar-large {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar-char-large {
  font-size: 18px;
  font-weight: bold;
  font-family: "STKaiti", "KaiTi", serif;
}

.online-status-dot-large {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
}

/* 右侧信息区 */
.online-player-info-enhanced {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

.online-sect-tag-enhanced {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 1px;
}

.online-realm-text {
  font-size: 10px;
  color: #8b7355;
  letter-spacing: 0.5px;
}

/* 血条 */
.online-hp-bar-container {
  display: flex;
  align-items: center;
  gap: 4px;
}

.online-hp-bar {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.online-hp-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.online-hp-text {
  font-size: 9px;
  color: #e74c3c;
  font-weight: bold;
  min-width: 18px;
}


/* 在线玩家头像图片 */
.online-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-char-fallback {
  position: absolute;
  font-size: 18px;
  font-weight: bold;
  font-family: "STKaiti", "KaiTi", serif;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}


/* 在线玩家头像 - 只显示头部裁剪 */
.online-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
}


/* ===== 统一头像组件样式 ===== */
.avatar-container {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.avatar-status-dot.online {
  background: #4caf50;
  box-shadow: 0 0 4px #4caf50;
}

.avatar-status-dot.offline {
  background: #999;
}

/* 不同尺寸 */
.avatar-small { width: 32px; height: 32px; }
.avatar-medium { width: 48px; height: 48px; }
.avatar-large { width: 64px; height: 64px; }
.avatar-xlarge { width: 120px; height: 120px; }


/* 修复聊天头像外框为圆形 */
.chat-msg-avatar {
  border-radius: 50% !important;
  overflow: hidden;
}

/* 修复玩家详情弹窗头像大小 */
.pd-avatar-frame .avatar-container {
  width: 100% !important;
  height: 100% !important;
}

.pd-avatar-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pd-avatar-custom {
  width: 84px !important;
  height: 84px !important;
}


/* ===== 权威修复：聊天头像精修 ===== */
.chat-msg-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid #c9a96e !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.chat-msg-avatar .avatar-container {
  width: 100% !important;
  height: 100% !important;
}

.chat-msg-avatar .avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* ===== 底部聊天栏头像精修 ===== */
.scroll-avatar {
  width: 64px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.scroll-avatar .avatar-container {
  width: 56px !important;
  height: 56px !important;
}

.scroll-avatar .avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* ===== 玩家详情弹窗精修 ===== */
.pd-top-section {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

/* 人物立绘区域 */
.pd-portrait-area {
  width: 100px !important;
  height: 140px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #c9a96e !important;
  border-radius: 8px !important;
  background: rgba(0,0,0,0.3) !important;
  overflow: hidden !important;
}

.pd-portrait-img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* 装备网格：2行4列 */
.pd-equip-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}


/* ===== 侠客资料弹窗专业布局 ===== */
.player-detail-modal .modal-content {
  width: 520px !important;
}

/* 顶部区域：立绘 + 头像信息 */
.pd-top-section {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  padding: 10px 0 !important;
}

/* 人物立绘 - 放大 */
.pd-portrait-area {
  width: 140px !important;
  height: 200px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #c9a96e !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(60,40,20,0.8), rgba(30,20,10,0.9)) !important;
  overflow: hidden !important;
  box-shadow: 0 0 20px rgba(201,169,110,0.3) !important;
}

.pd-portrait-img {
  max-width: 95% !important;
  max-height: 95% !important;
  object-fit: contain !important;
}

/* 头像缩小 */
.pd-avatar-area {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}

.pd-avatar-frame {
  width: 64px !important;
  height: 64px !important;
}

.pd-avatar-custom {
  width: 58px !important;
  height: 58px !important;
}

/* 右侧信息区域 */
.pd-basic-info {
  flex: 1 !important;
  padding-top: 8px !important;
}


/* ===== 方案C · 悬浮式布局 ===== */
.player-detail-modal .modal-content {
  width: 560px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 弹窗标题栏 */
.pd-modal-header {
  background: linear-gradient(180deg, #3a2a1a, #2a1a0a) !important;
  padding: 12px 20px !important;
  border-bottom: 2px solid #c9a96e !important;
}

/* 主体内容区 */
.pd-body {
  display: flex !important;
  position: relative !important;
  min-height: 320px !important;
}

/* 左侧立绘 - 突出悬浮 */
.pd-portrait-area {
  position: absolute !important;
  left: 20px !important;
  top: -20px !important;
  width: 180px !important;
  height: 260px !important;
  z-index: 10 !important;
  border: 3px solid #c9a96e !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #4a3a2a, #2a1a0a) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 40px rgba(201,169,110,0.3) !important;
  overflow: hidden !important;
}

.pd-portrait-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* 右侧信息区 */
.pd-info-area {
  margin-left: 200px !important;
  padding: 20px !important;
  flex: 1 !important;
}

/* 头像 - 小而精致，叠在立绘上方 */
.pd-avatar-area {
  position: absolute !important;
  left: 130px !important;
  top: 20px !important;
  z-index: 20 !important;
}

.pd-avatar-frame {
  width: 56px !important;
  height: 56px !important;
  border-width: 3px !important;
}

.pd-avatar-custom {
  width: 50px !important;
  height: 50px !important;
}

.pd-avatar-level {
  position: absolute !important;
  bottom: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #c9a96e !important;
  color: #1a0f08 !important;
  font-size: 11px !important;
  padding: 1px 8px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}

/* 基本信息行 */
.pd-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.pd-name {
  font-size: 20px !important;
  font-weight: bold !important;
  color: #fff !important;
}

.pd-title-tag {
  background: linear-gradient(90deg, #c9a96e, #e9c98e) !important;
  color: #1a0f08 !important;
  font-size: 12px !important;
  padding: 2px 10px !important;
  border-radius: 10px !important;
}

/* 属性行 */
.pd-info-row {
  display: flex !important;
  margin-bottom: 8px !important;
  font-size: 14px !important;
}

.pd-info-label {
  width: 60px !important;
  color: #c9a96e !important;
}

.pd-info-value {
  color: #fff !important;
  font-weight: bold !important;
}

/* 属性网格 */
.pd-stats-section {
  margin: 16px 0 !important;
  padding: 12px !important;
  background: rgba(0,0,0,0.3) !important;
  border-radius: 8px !important;
}

.pd-section-title {
  text-align: center !important;
  color: #c9a96e !important;
  font-size: 14px !important;
  margin-bottom: 12px !important;
}

.pd-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}

.pd-stat-item {
  text-align: center !important;
}

.pd-stat-label {
  display: block !important;
  font-size: 12px !important;
  color: #aaa !important;
  margin-bottom: 4px !important;
}

.pd-stat-value {
  display: block !important;
  font-size: 18px !important;
  font-weight: bold !important;
  color: #c9a96e !important;
}

/* 装备网格 */
.pd-equip-section {
  margin: 16px 0 !important;
  padding: 12px !important;
  background: rgba(0,0,0,0.3) !important;
  border-radius: 8px !important;
}

.pd-equip-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

/* 操作按钮 */
.pd-actions {
  display: flex !important;
  gap: 10px !important;
  padding: 16px 20px !important;
  border-top: 1px solid #c9a96e40 !important;
  background: rgba(0,0,0,0.2) !important;
}

.pd-action-btn {
  flex: 1 !important;
  padding: 8px !important;
  border: 1px solid #c9a96e !important;
  background: linear-gradient(180deg, #4a3a2a, #3a2a1a) !important;
  color: #fff !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  text-align: center !important;
  font-size: 13px !important;
}


/* ===== 方案C悬浮式布局修正 ===== */
/* 立绘位置调整 - 不要超出标题栏 */
.pd-portrait-area {
  position: absolute !important;
  left: 20px !important;
  top: 60px !important;
  width: 160px !important;
  height: 230px !important;
  z-index: 10 !important;
}

/* 头像位置调整 - 在立绘右上角 */
.pd-avatar-area {
  position: absolute !important;
  left: 130px !important;
  top: 75px !important;
  z-index: 20 !important;
}

/* 右侧信息区调整 - 确保不被立绘挡住 */
.pd-info-area {
  margin-left: 190px !important;
  padding: 20px 20px 20px 170px !important;
  flex: 1 !important;
}

/* 标题栏 */
.pd-modal-header {
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ===== 悬浮式布局最终修正 ===== */
/* 立绘位置 - 更靠左，不挡信息 */
.pd-portrait-area {
  position: absolute !important;
  left: 15px !important;
  top: 70px !important;
  width: 150px !important;
  height: 220px !important;
  z-index: 10 !important;
}

/* 头像位置 - 在立绘右上角 */
.pd-avatar-area {
  position: absolute !important;
  left: 125px !important;
  top: 80px !important;
  z-index: 20 !important;
}

/* 右侧信息区 - 确保不被立绘挡住 */
.pd-info-area {
  margin-left: 0 !important;
  padding: 20px 20px 20px 180px !important;
  flex: 1 !important;
}

/* 弹窗宽度加大 */
.player-detail-modal .modal-content {
  width: 580px !important;
}


/* ===== 方案A · 经典武侠风布局 ===== */
.player-detail-modal .modal-content {
  width: 520px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 弹窗标题栏 */
.pd-modal-header {
  background: linear-gradient(180deg, #3a2a1a, #2a1a0a) !important;
  padding: 12px 20px !important;
  border-bottom: 2px solid #c9a96e !important;
  text-align: center !important;
  font-size: 18px !important;
  color: #c9a96e !important;
  letter-spacing: 4px !important;
}

/* 主体内容区 - 左右布局 */
.pd-body {
  display: flex !important;
  gap: 20px !important;
  padding: 20px !important;
}

/* 左侧立绘区域 - 占1/3 */
.pd-portrait-area {
  width: 160px !important;
  height: 220px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  border: 3px solid #c9a96e !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #4a3a2a, #2a1a0a) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
  overflow: hidden !important;
}

.pd-portrait-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* 头像 - 叠在立绘底部 */
.pd-avatar-area {
  position: absolute !important;
  bottom: -10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
}

.pd-avatar-frame {
  width: 60px !important;
  height: 60px !important;
  border-width: 3px !important;
}

.pd-avatar-custom {
  width: 54px !important;
  height: 54px !important;
}

.pd-avatar-level {
  position: absolute !important;
  bottom: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #c9a96e !important;
  color: #1a0f08 !important;
  font-size: 11px !important;
  padding: 1px 8px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}

/* 右侧信息区域 - 占2/3 */
.pd-info-area {
  flex: 1 !important;
  padding-top: 10px !important;
}

/* 基本信息行 */
.pd-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 15px !important;
}

.pd-name {
  font-size: 22px !important;
  font-weight: bold !important;
  color: #fff !important;
}

.pd-title-tag {
  background: linear-gradient(90deg, #c9a96e, #e9c98e) !important;
  color: #1a0f08 !important;
  font-size: 12px !important;
  padding: 2px 10px !important;
  border-radius: 10px !important;
}

/* 属性行 */
.pd-info-row {
  display: flex !important;
  margin-bottom: 8px !important;
  font-size: 14px !important;
}

.pd-info-label {
  width: 60px !important;
  color: #c9a96e !important;
}

.pd-info-value {
  color: #fff !important;
  font-weight: bold !important;
}

/* 属性网格 */
.pd-stats-section {
  margin: 16px 0 !important;
  padding: 12px !important;
  background: rgba(0,0,0,0.3) !important;
  border-radius: 8px !important;
}

.pd-section-title {
  text-align: center !important;
  color: #c9a96e !important;
  font-size: 14px !important;
  margin-bottom: 12px !important;
}

.pd-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}

.pd-stat-item {
  text-align: center !important;
}

.pd-stat-label {
  display: block !important;
  font-size: 12px !important;
  color: #aaa !important;
  margin-bottom: 4px !important;
}

.pd-stat-value {
  display: block !important;
  font-size: 18px !important;
  font-weight: bold !important;
  color: #c9a96e !important;
}

/* 装备网格 */
.pd-equip-section {
  margin: 16px 0 !important;
  padding: 12px !important;
  background: rgba(0,0,0,0.3) !important;
  border-radius: 8px !important;
}

.pd-equip-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

/* 操作按钮 */
.pd-actions {
  display: flex !important;
  gap: 10px !important;
  padding: 16px 20px !important;
  border-top: 1px solid #c9a96e40 !important;
  background: rgba(0,0,0,0.2) !important;
}

.pd-action-btn {
  flex: 1 !important;
  padding: 8px !important;
  border: 1px solid #c9a96e !important;
  background: linear-gradient(180deg, #4a3a2a, #3a2a1a) !important;
  color: #fff !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  text-align: center !important;
  font-size: 13px !important;
}


/* ===== 方案A布局修正 ===== */
/* 头像 - 叠在立绘底部居中 */
.pd-avatar-area {
  position: absolute !important;
  bottom: -15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
}

/* 右侧信息区 - 和立绘顶部对齐 */
.pd-info-area {
  flex: 1 !important;
  padding-top: 0 !important;
}


/* ===== 方案A头像定位修复 ===== */
/* 确保立绘区域是相对定位 */
.pd-portrait-area {
  position: relative !important;
}

/* 头像 - 相对于立绘定位，叠在底部居中 */
.pd-avatar-area {
  position: absolute !important;
  bottom: -15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
}


/* ===== 强制覆盖：头像定位 ===== */
.pd-portrait-area .pd-avatar-area {
  position: absolute !important;
  bottom: -20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 99 !important;
  margin: 0 !important;
}

/* 确保立绘区域相对定位 */
.pd-portrait-area {
  position: relative !important;
}

/* 右侧信息区不要有头像 */
.pd-info-area .pd-avatar-area {
  display: none !important;
}


/* ===== 方案A布局最终调整 ===== */
/* 弹窗宽度加大 */
.player-detail-modal .modal-content {
  width: 580px !important;
}

/* 主体内容区 */
.pd-body {
  display: flex !important;
  gap: 20px !important;
  padding: 20px !important;
  align-items: flex-start !important;
}

/* 左侧立绘 */
.pd-portrait-area {
  width: 150px !important;
  height: 220px !important;
  flex-shrink: 0 !important;
}

/* 右侧信息区 */
.pd-info-area {
  flex: 1 !important;
  min-width: 0 !important;
  padding-top: 0 !important;
}

/* 属性网格 */
.pd-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
}

/* 装备网格 */
.pd-equip-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}


/* ===== 修复右侧信息区布局 ===== */
.pd-info-area {
  flex: 1 !important;
  min-width: 320px !important;
  text-align: left !important;
}

.pd-name {
  font-size: 22px !important;
  white-space: nowrap !important;
}

.pd-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 15px !important;
}

.pd-info-row {
  display: flex !important;
  flex-direction: row !important;
  margin-bottom: 8px !important;
  font-size: 14px !important;
}

.pd-info-label {
  width: 60px !important;
  flex-shrink: 0 !important;
}

.pd-info-value {
  flex: 1 !important;
}

/* 属性网格 - 横向4列 */
.pd-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
}

/* 装备网格 - 横向4列 */
.pd-equip-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
}


/* ===== 再加大弹窗宽度 ===== */
.player-detail-modal {
  width: 620px !important;
  min-width: 620px !important;
}

.player-detail-modal .modal-content {
  width: 620px !important;
}

/* 右侧信息区宽度 */
.pd-info-area {
  min-width: 380px !important;
}

/* 属性面板4列 */
.pd-stats-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* 装备面板4列，显示8个 */
.pd-equip-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}


/* ===== 方案A精致调整 ===== */
/* 立绘区域 - 增加背景装饰 */
.pd-portrait-area {
  width: 160px !important;
  height: 240px !important;
  background: linear-gradient(180deg, rgba(201,169,110,0.15) 0%, rgba(0,0,0,0.3) 100%) !important;
  border: 1px solid rgba(201,169,110,0.4) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  position: relative !important;
  overflow: visible !important;
}

/* 立绘图片 */
.pd-portrait-img {
  width: 130px !important;
  height: auto !important;
  max-height: 200px !important;
  object-fit: contain !important;
  margin-bottom: 25px !important;
}

/* 头像 - 调整位置，不要和立绘重叠太多 */
.pd-portrait-area .pd-avatar-area {
  position: absolute !important;
  bottom: -18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
}

.pd-avatar-frame {
  width: 70px !important;
  height: 70px !important;
  border: 2px solid #c9a96e !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-shadow: 0 0 15px rgba(201,169,110,0.5) !important;
}

/* 右侧信息区 - 增加padding */
.pd-info-area {
  padding: 10px 15px !important;
}

/* 弹窗整体 - 增加内边距 */
.player-detail-modal {
  padding: 20px !important;
}


/* ===== 新布局：立绘左上、头像右上、装备栏下移 ===== */
.pd-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  padding: 20px !important;
}

/* 顶部行 */
.pd-top-row {
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
}

/* 左侧立绘 */
.pd-portrait-area {
  width: 150px !important;
  height: 200px !important;
  flex-shrink: 0 !important;
  background: linear-gradient(180deg, rgba(201,169,110,0.15) 0%, rgba(0,0,0,0.3) 100%) !important;
  border: 1px solid rgba(201,169,110,0.4) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pd-portrait-img {
  width: 120px !important;
  height: auto !important;
  max-height: 180px !important;
  object-fit: contain !important;
}

/* 右侧基本信息区 */
.pd-basic-area {
  flex: 1 !important;
  display: flex !important;
  gap: 15px !important;
  align-items: flex-start !important;
}

/* 头像 */
.pd-avatar-area {
  flex-shrink: 0 !important;
  text-align: center !important;
}

.pd-avatar-frame {
  width: 80px !important;
  height: 80px !important;
  border: 2px solid #c9a96e !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-shadow: 0 0 15px rgba(201,169,110,0.5) !important;
}

/* 名字和基本信息 */
.pd-name-area {
  flex: 1 !important;
}

.pd-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 15px !important;
}

.pd-name {
  font-size: 22px !important;
  font-weight: bold !important;
}

.pd-info-row {
  display: flex !important;
  margin-bottom: 8px !important;
  font-size: 14px !important;
}

.pd-info-label {
  width: 60px !important;
  color: #c9a96e !important;
}

.pd-info-value {
  flex: 1 !important;
  color: #fff !important;
}

/* 属性面板 */
.pd-stats-section {
  width: 100% !important;
}

.pd-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}

/* 装备面板 */
.pd-equip-section {
  width: 100% !important;
}

.pd-equip-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}


/* ===== 修复新布局细节 ===== */
/* 顶部行：立绘和基本信息 */
.pd-top-row {
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
  margin-bottom: 10px !important;
}

/* 右侧基本信息区 */
.pd-basic-area {
  flex: 1 !important;
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
  padding-top: 10px !important;
}

/* 头像 */
.pd-avatar-area {
  flex-shrink: 0 !important;
  text-align: center !important;
}

.pd-avatar-frame {
  width: 80px !important;
  height: 80px !important;
}

/* 等级标签 - 在头像下面 */
.pd-avatar-level {
  margin-top: 5px !important;
  font-size: 12px !important;
  color: #c9a96e !important;
  background: rgba(0,0,0,0.5) !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  display: inline-block !important;
}

/* 名字信息区 */
.pd-name-area {
  flex: 1 !important;
  padding-top: 0 !important;
}

.pd-name-row {
  margin-bottom: 15px !important;
}

.pd-info-row {
  margin-bottom: 8px !important;
}


/* ===== 修复等级标签位置 ===== */
/* 基本信息区布局 */
.pd-basic-area {
  display: flex !important;
  gap: 15px !important;
  align-items: flex-start !important;
}

/* 头像区域 - 头像+等级标签垂直排列 */
.pd-avatar-area {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* 等级标签 - 头像正下方 */
.pd-avatar-level {
  margin-top: 6px !important;
  font-size: 12px !important;
  color: #c9a96e !important;
  background: rgba(0,0,0,0.5) !important;
  padding: 2px 10px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(201,169,110,0.4) !important;
}


/* ===== 强制定位等级标签 ===== */
.pd-basic-area .pd-avatar-area {
  position: relative !important;
}

.pd-basic-area .pd-avatar-level {
  position: static !important;
  display: block !important;
  text-align: center !important;
  margin-top: 8px !important;
  clear: both !important;
}


/* ===== 调整基本信息区布局 ===== */
.pd-basic-area {
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
}

/* 左边：门派/境界/战力 */
.pd-name-area {
  flex: 1 !important;
  text-align: right !important;
}

.pd-name-row {
  justify-content: flex-end !important;
}

.pd-info-row {
  justify-content: flex-end !important;
}

.pd-info-label {
  text-align: right !important;
}

.pd-info-value {
  text-align: right !important;
}


/* ===== 侠客资料弹窗 - 重新设计版 ===== */
.pd-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0,0,0,0.7) !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 弹窗主体 - 卷轴背景 */
.pd-modal-scroll {
  width: 620px !important;
  background: url('/assets/img/modal-bg-scroll.png') center center / cover no-repeat !important;
  border-radius: 8px !important;
  box-shadow: 0 0 40px rgba(201,169,110,0.3) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* 标题栏 */
.pd-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 15px 20px !important;
  position: relative !important;
  border-bottom: 1px solid rgba(201,169,110,0.3) !important;
}

.pd-modal-title {
  font-size: 20px !important;
  font-weight: bold !important;
  color: #c9a96e !important;
  letter-spacing: 4px !important;
  text-shadow: 0 0 10px rgba(201,169,110,0.5) !important;
}

.pd-modal-close {
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(201,169,110,0.2) !important;
  border: 1px solid #c9a96e !important;
  color: #c9a96e !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pd-modal-close:hover {
  background: rgba(201,169,110,0.4) !important;
}

/* 主体内容 */
.pd-modal-body {
  display: flex !important;
  gap: 20px !important;
  padding: 20px !important;
}

/* 左侧立绘 */
.pd-left-portrait {
  flex-shrink: 0 !important;
}

.pd-portrait-frame {
  width: 150px !important;
  height: 200px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%) !important;
  border: 2px solid #c9a96e !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5) !important;
}

.pd-portrait-img {
  width: 120px !important;
  height: auto !important;
  max-height: 180px !important;
  object-fit: contain !important;
}

/* 右侧信息 */
.pd-right-info {
  flex: 1 !important;
  min-width: 0 !important;
}

/* 头像+名字行 */
.pd-header-row {
  display: flex !important;
  gap: 15px !important;
  align-items: flex-start !important;
  margin-bottom: 15px !important;
}

.pd-avatar-box {
  flex-shrink: 0 !important;
  text-align: center !important;
}

.pd-avatar-ring {
  width: 70px !important;
  height: 70px !important;
  border: 2px solid #c9a96e !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-shadow: 0 0 15px rgba(201,169,110,0.5) !important;
}

.pd-level-badge {
  margin-top: 5px !important;
  font-size: 12px !important;
  color: #c9a96e !important;
  background: rgba(0,0,0,0.6) !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(201,169,110,0.4) !important;
  display: inline-block !important;
}

.pd-name-box {
  flex: 1 !important;
  padding-top: 5px !important;
}

.pd-player-name {
  font-size: 22px !important;
  font-weight: bold !important;
  color: #fff !important;
  margin-bottom: 5px !important;
}

.pd-player-title {
  font-size: 13px !important;
  color: #c9a96e !important;
}

/* 基本信息 */
.pd-basic-info {
  margin-bottom: 15px !important;
}

.pd-info-line {
  display: flex !important;
  margin-bottom: 6px !important;
  font-size: 14px !important;
}

.pd-label {
  width: 50px !important;
  color: #c9a96e !important;
}

.pd-value {
  flex: 1 !important;
  color: #fff !important;
}

.pd-power {
  color: #ffd700 !important;
  font-weight: bold !important;
}

/* 区块标题 */
.pd-section-title {
  text-align: center !important;
  color: #c9a96e !important;
  font-size: 14px !important;
  margin-bottom: 10px !important;
  letter-spacing: 2px !important;
}

/* 属性面板 */
.pd-stats-section {
  width: 100% !important;
}

.pd-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
}

.pd-stat-card {
  background: rgba(0,0,0,0.4) !important;
  border: 1px solid rgba(201,169,110,0.3) !important;
  border-radius: 6px !important;
  padding: 10px 5px !important;
  text-align: center !important;
}

.pd-stat-label {
  display: block !important;
  font-size: 12px !important;
  color: #c9a96e !important;
  margin-bottom: 5px !important;
}

.pd-stat-value {
  display: block !important;
  font-size: 18px !important;
  font-weight: bold !important;
  color: #ffd700 !important;
}

/* 装备面板 */
.pd-equip-section {
  padding: 0 20px 15px 20px !important;
}

.pd-equip-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}

.pd-equip-item {
  text-align: center !important;
}

.pd-equip-icon {
  width: 50px !important;
  height: 50px !important;
  margin: 0 auto 5px auto !important;
  background: rgba(0,0,0,0.5) !important;
  border: 2px solid !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
}

.pd-equip-name {
  font-size: 11px !important;
  display: block !important;
}

/* 底部操作按钮 */
.pd-action-buttons {
  display: flex !important;
  gap: 10px !important;
  padding: 15px 20px !important;
  border-top: 1px solid rgba(201,169,110,0.3) !important;
}

.pd-btn {
  flex: 1 !important;
  padding: 10px !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
}

.pd-btn-primary {
  background: linear-gradient(180deg, #c9a96e 0%, #a08040 100%) !important;
  color: #fff !important;
}

.pd-btn-secondary {
  background: linear-gradient(180deg, #6b5535 0%, #4a3820 100%) !important;
  color: #c9a96e !important;
  border: 1px solid #c9a96e !important;
}

.pd-btn-danger {
  background: linear-gradient(180deg, #8b3a3a 0%, #5a2525 100%) !important;
  color: #fff !important;
  border: 1px solid #c9a96e !important;
}

.pd-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(201,169,110,0.4) !important;
}


/* ===== 优化文字可读性 ===== */
/* 基本信息区 - 加半透明底色 */
.pd-basic-info {
  background: rgba(0,0,0,0.35) !important;
  padding: 10px 15px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(201,169,110,0.2) !important;
}

/* 属性面板 - 加深底色 */
.pd-stat-card {
  background: rgba(0,0,0,0.5) !important;
}

/* 装备区域 - 加深底色 */
.pd-equip-section {
  background: rgba(0,0,0,0.3) !important;
  margin: 0 20px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(201,169,110,0.2) !important;
}

/* 文字增加阴影 */
.pd-player-name,
.pd-info-value,
.pd-stat-value,
.pd-equip-name {
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

.pd-label,
.pd-section-title,
.pd-stat-label,
.pd-player-title {
  text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
}

/* 装备图标背景加深 */
.pd-equip-icon {
  background: rgba(0,0,0,0.6) !important;
}


/* ===== 深度优化文字可读性 ===== */
/* 弹窗内容区整体加深底色 */
.pd-modal-scroll {
  background: linear-gradient(180deg, #2a1f14 0%, #1a120a 100%) !important;
}

/* 标题栏加深 */
.pd-modal-header {
  background: rgba(0,0,0,0.3) !important;
}

/* 基本信息区 - 加深背景 */
.pd-basic-info {
  background: rgba(0,0,0,0.6) !important;
  border: 1px solid rgba(201,169,110,0.4) !important;
}

/* 属性面板 - 加深背景 */
.pd-stat-card {
  background: rgba(0,0,0,0.6) !important;
  border: 1px solid rgba(201,169,110,0.4) !important;
}

/* 装备区域 - 加深背景 */
.pd-equip-section {
  background: rgba(0,0,0,0.5) !important;
  border: 1px solid rgba(201,169,110,0.4) !important;
}

/* 立绘框加深 */
.pd-portrait-frame {
  background: rgba(0,0,0,0.7) !important;
  border: 2px solid #c9a96e !important;
}

/* 文字颜色统一调亮 */
.pd-player-name {
  color: #fff !important;
  font-size: 24px !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9) !important;
}

.pd-player-title {
  color: #ffd700 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
}

.pd-label {
  color: #c9a96e !important;
  font-size: 14px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
}

.pd-value {
  color: #fff !important;
  font-size: 15px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
}

.pd-power {
  color: #ffd700 !important;
  font-weight: bold !important;
}

.pd-section-title {
  color: #c9a96e !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
}

.pd-stat-label {
  color: #c9a96e !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
}

.pd-stat-value {
  color: #ffd700 !important;
  font-size: 20px !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

.pd-equip-name {
  text-shadow: 0 1px 2px rgba(0,0,0,0.9) !important;
  font-size: 12px !important;
}

.pd-equip-icon {
  background: rgba(0,0,0,0.8) !important;
}


/* ===== 调整立绘和头像位置 ===== */
/* 立绘框 - 立绘下调 */
.pd-portrait-frame {
  display: flex !important;
  align-items: flex-end !important;
  padding-bottom: 10px !important;
}

.pd-portrait-img {
  margin-bottom: 10px !important;
}

/* 头像 - 和外框一致 */
.pd-avatar-ring {
  width: 70px !important;
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pd-avatar-ring img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* ===== 宠物展示区域 ===== */
.pd-left-portrait {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.pd-pet-section {
  background: rgba(0,0,0,0.5) !important;
  border: 1px solid rgba(201,169,110,0.4) !important;
  border-radius: 6px !important;
  padding: 10px !important;
  width: 150px !important;
}

.pd-pet-title {
  text-align: center !important;
  color: #c9a96e !important;
  font-size: 13px !important;
  margin-bottom: 8px !important;
  letter-spacing: 2px !important;
}

.pd-pet-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.pd-pet-icon {
  width: 40px !important;
  height: 40px !important;
  background: rgba(201,169,110,0.2) !important;
  border: 1px solid #c9a96e !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

.pd-pet-info {
  flex: 1 !important;
}

.pd-pet-name {
  color: #fff !important;
  font-size: 14px !important;
  margin-bottom: 3px !important;
}

.pd-pet-level {
  color: #c9a96e !important;
  font-size: 12px !important;
}


/* ===== 调整头像和立绘特效 ===== */
/* 头像 - 和外框完全一致 */
.pd-avatar-ring {
  width: 70px !important;
  height: 70px !important;
  padding: 0 !important;
  border: 2px solid #c9a96e !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

.pd-avatar-ring img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 立绘框 - 增加发光特效 */
.pd-portrait-frame {
  position: relative !important;
  background: rgba(0,0,0,0.4) !important;
  border: 2px solid #c9a96e !important;
  border-radius: 8px !important;
  box-shadow: 
    0 0 15px rgba(201,169,110,0.5),
    inset 0 0 20px rgba(201,169,110,0.2) !important;
}

/* 立绘 - 增加光晕效果 */
.pd-portrait-img {
  filter: drop-shadow(0 0 10px rgba(201,169,110,0.6)) !important;
}


/* ===== 再次调整头像和立绘背景 ===== */
/* 头像 - 和外框完全匹配 */
.pd-avatar-ring {
  width: 65px !important;
  height: 65px !important;
  padding: 0 !important;
  border: 3px solid #c9a96e !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.pd-avatar-ring img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 立绘框 - 背景调亮，不要太黑 */
.pd-portrait-frame {
  background: linear-gradient(135deg, rgba(139,105,60,0.6), rgba(101,67,33,0.6)) !important;
  border: 2px solid #c9a96e !important;
  border-radius: 8px !important;
  box-shadow: 
    0 0 15px rgba(201,169,110,0.4),
    inset 0 0 20px rgba(201,169,110,0.1) !important;
}

/* 立绘 - 调整光晕，不要太强 */
.pd-portrait-img {
  filter: drop-shadow(0 0 8px rgba(201,169,110,0.5)) !important;
}


/* ===== 继续加大头像，和外框完全对接 ===== */
/* 头像外框 - 调小边框，让头像更大 */
.pd-avatar-ring {
  width: 75px !important;
  height: 75px !important;
  padding: 0 !important;
  border: 2px solid #c9a96e !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.pd-avatar-ring img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 头像容器 - 调整位置 */
.pd-avatar-box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ===== 彻底解决头像和外框空隙问题 ===== */
/* 头像外框 - 0 padding，0 margin */
.pd-avatar-ring {
  width: 70px !important;
  height: 70px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 3px solid #c9a96e !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* 头像容器内所有元素 - 100%填满 */
.pd-avatar-ring > * {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

.pd-avatar-ring img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 头像外框和头像之间不能有任何空隙 */
.pd-avatar-box {
  padding: 0 !important;
  margin: 0 !important;
}


/* ===== 头像img标签样式 - 100%填满外框 ===== */
.pd-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
}


/* ===== 彻底解决头像问题 ===== */
/* 头像外框 - 背景完全透明，只有金色边框 */
.pd-avatar-ring {
  width: 70px !important;
  height: 70px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 3px solid #c9a96e !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: transparent !important;
  line-height: 0 !important;
}

/* 头像img - 强制填满，没有任何边距 */
.pd-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
}


/* ========================================
   侠客资料弹窗 - 墨韵武侠风专业版
   ======================================== */

/* 弹窗主背景 - 墨黑偏棕 */
.pd-modal-scroll {
  background: linear-gradient(180deg, #2b2420 0%, #1f1a17 100%) !important;
  border: 2px solid #b89968 !important;
  border-radius: 12px !important;
  box-shadow: 
    0 0 30px rgba(0,0,0,0.8),
    0 0 60px rgba(184,153,104,0.1) !important;
}

/* 标题栏 */
.pd-modal-header {
  background: linear-gradient(90deg, transparent, rgba(184,153,104,0.15), transparent) !important;
  border-bottom: 1px solid rgba(184,153,104,0.3) !important;
}

.pd-modal-title {
  color: #d4af37 !important;
  font-size: 20px !important;
  font-weight: bold !important;
  letter-spacing: 4px !important;
}

/* 立绘框 - 加水墨纹理感 */
.pd-portrait-frame {
  background: 
    radial-gradient(circle at 50% 30%, rgba(184,153,104,0.15), transparent 70%),
    linear-gradient(135deg, #3d3229, #2b2420) !important;
  border: 2px solid #b89968 !important;
  border-radius: 8px !important;
  box-shadow: 
    inset 0 0 30px rgba(0,0,0,0.5),
    0 0 15px rgba(184,153,104,0.2) !important;
}

/* 基本信息卡片 - 深棕卡片，比主背景亮 */
.pd-basic-info {
  background: #3d3229 !important;
  border: 1px solid rgba(184,153,104,0.3) !important;
  border-radius: 8px !important;
  padding: 15px !important;
}

.pd-label {
  color: #9a8a75 !important;
  font-size: 14px !important;
}

.pd-value {
  color: #f0e6d2 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* 战力数值 - 红色突出 */
.pd-power {
  color: #e74c3c !important;
  font-size: 18px !important;
  font-weight: bold !important;
}

/* 属性面板 - 深棕卡片 */
.pd-stats-section {
  background: #3d3229 !important;
  border: 1px solid rgba(184,153,104,0.3) !important;
  border-radius: 8px !important;
  padding: 15px !important;
}

.pd-section-title {
  color: #d4af37 !important;
  font-size: 14px !important;
  letter-spacing: 3px !important;
}

/* 属性卡片 */
.pd-stat-card {
  background: #2b2420 !important;
  border: 1px solid rgba(184,153,104,0.2) !important;
  border-radius: 6px !important;
}

.pd-stat-label {
  color: #9a8a75 !important;
  font-size: 13px !important;
}

.pd-stat-value {
  color: #d4af37 !important;
  font-size: 22px !important;
  font-weight: bold !important;
}

/* 装备面板 */
.pd-equip-section {
  background: #3d3229 !important;
  border: 1px solid rgba(184,153,104,0.3) !important;
  border-radius: 8px !important;
  padding: 15px !important;
}

.pd-equip-icon {
  background: #2b2420 !important;
  border: 2px solid rgba(184,153,104,0.4) !important;
  border-radius: 6px !important;
}

/* 宠物/坐骑卡片 */
.pd-pet-section {
  background: #3d3229 !important;
  border: 1px solid rgba(184,153,104,0.3) !important;
  border-radius: 6px !important;
}

.pd-pet-title {
  color: #d4af37 !important;
  font-size: 13px !important;
}

.pd-pet-name {
  color: #f0e6d2 !important;
  font-size: 14px !important;
}

/* 玩家名字 */
.pd-player-name {
  color: #f0e6d2 !important;
  font-size: 24px !important;
  font-weight: bold !important;
}

.pd-player-title {
  color: #d4af37 !important;
  font-size: 14px !important;
}

/* 按钮优化 */
.pd-btn {
  border-radius: 6px !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
}

.pd-btn-primary {
  background: linear-gradient(180deg, #b89968, #9a7f55) !important;
  color: #fff !important;
  border: none !important;
}

.pd-btn-primary:hover {
  background: linear-gradient(180deg, #c9a96e, #a88a5e) !important;
  box-shadow: 0 0 10px rgba(184,153,104,0.5) !important;
}

.pd-btn-secondary {
  background: #3d3229 !important;
  color: #f0e6d2 !important;
  border: 1px solid rgba(184,153,104,0.4) !important;
}

.pd-btn-secondary:hover {
  background: #4a3d32 !important;
  border-color: #b89968 !important;
}

.pd-btn-danger {
  background: linear-gradient(180deg, #c0392b, #96281b) !important;
  color: #fff !important;
  border: none !important;
}

.pd-btn-danger:hover {
  background: linear-gradient(180deg, #d44333, #a52a1c) !important;
  box-shadow: 0 0 10px rgba(192,57,43,0.5) !important;
}


/* ========================================
   个人信息弹窗 - 墨韵武侠风专业版
   ======================================== */

/* 弹窗主背景 */
.player-info-modal {
  background: linear-gradient(180deg, #2b2420 0%, #1f1a17 100%) !important;
  border: 2px solid #b89968 !important;
  border-radius: 12px !important;
  box-shadow: 
    0 0 30px rgba(0,0,0,0.8),
    0 0 60px rgba(184,153,104,0.1) !important;
}

/* 标题栏 */
.pi-header {
  background: linear-gradient(90deg, transparent, rgba(184,153,104,0.15), transparent) !important;
  border-bottom: 1px solid rgba(184,153,104,0.3) !important;
}

.pi-title-text {
  color: #d4af37 !important;
  font-size: 20px !important;
  font-weight: bold !important;
  letter-spacing: 4px !important;
}

/* 立绘框 */
.pi-portrait-frame {
  background: 
    radial-gradient(circle at 50% 30%, rgba(184,153,104,0.15), transparent 70%),
    linear-gradient(135deg, #3d3229, #2b2420) !important;
  border: 2px solid #b89968 !important;
  border-radius: 8px !important;
  box-shadow: 
    inset 0 0 30px rgba(0,0,0,0.5),
    0 0 15px rgba(184,153,104,0.2) !important;
}

.pi-portrait-name {
  color: #f0e6d2 !important;
  font-size: 18px !important;
  font-weight: bold !important;
}

.pi-title-tag {
  color: #d4af37 !important;
  font-size: 14px !important;
}

.pi-portrait-realm {
  color: #9a8a75 !important;
  font-size: 13px !important;
}

/* 基础信息 */
.pi-info-label {
  color: #9a8a75 !important;
  font-size: 14px !important;
}

.pi-info-value {
  color: #f0e6d2 !important;
  font-size: 15px !important;
}

.pi-sect {
  color: #f0e6d2 !important;
}

.pi-gold {
  color: #d4af37 !important;
  font-weight: bold !important;
}

/* 进度条 */
.pi-exp-bar {
  background: #1f1a17 !important;
  border: 1px solid rgba(184,153,104,0.3) !important;
}

.pi-exp-fill {
  background: linear-gradient(90deg, #b89968, #d4af37) !important;
}

.pi-hp-bar .pi-bar-fill {
  background: linear-gradient(90deg, #c0392b, #e74c3c) !important;
}

.pi-mp-bar .pi-bar-fill {
  background: linear-gradient(90deg, #2980b9, #3498db) !important;
}

.pi-bar {
  background: #1f1a17 !important;
  border: 1px solid rgba(184,153,104,0.3) !important;
}

/* 战斗力区 */
.pi-power-area {
  background: #3d3229 !important;
  border: 1px solid rgba(184,153,104,0.3) !important;
  border-radius: 8px !important;
}

.pi-power-title {
  color: #9a8a75 !important;
  font-size: 14px !important;
  letter-spacing: 3px !important;
}

.pi-power-value {
  color: #e74c3c !important;
  font-size: 32px !important;
  font-weight: bold !important;
}

.pi-power-label {
  color: #9a8a75 !important;
  font-size: 13px !important;
}

.pi-power-num {
  color: #d4af37 !important;
  font-weight: bold !important;
}

.pi-rank-num {
  color: #d4af37 !important;
  font-weight: bold !important;
}

/* 标签页 */
.pi-tabs {
  background: #3d3229 !important;
  border: 1px solid rgba(184,153,104,0.3) !important;
  border-radius: 8px !important;
}

.pi-tab {
  background: transparent !important;
  color: #9a8a75 !important;
  border: none !important;
  border-radius: 6px !important;
}

.pi-tab.active {
  background: #2b2420 !important;
  color: #d4af37 !important;
}

.pi-tab-name {
  color: inherit !important;
}

/* 属性面板 */
.pi-stats-group-title {
  color: #d4af37 !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
}

.pi-stat-item {
  background: #3d3229 !important;
  border: 1px solid rgba(184,153,104,0.2) !important;
  border-radius: 6px !important;
}

.pi-stat-name {
  color: #9a8a75 !important;
  font-size: 13px !important;
}

.pi-stat-value {
  color: #d4af37 !important;
  font-size: 18px !important;
  font-weight: bold !important;
}

.pi-crit {
  color: #e74c3c !important;
}

.pi-dodge {
  color: #3498db !important;
}

/* 隐藏属性 */
.pi-hidden-stat {
  background: #3d3229 !important;
  border: 1px solid rgba(184,153,104,0.2) !important;
  border-radius: 6px !important;
}

.pi-hidden-name {
  color: #f0e6d2 !important;
}

.pi-hidden-value {
  color: #d4af37 !important;
  font-weight: bold !important;
}

.pi-hidden-bar {
  background: #1f1a17 !important;
  border: 1px solid rgba(184,153,104,0.2) !important;
}

.pi-hidden-desc {
  color: #9a8a75 !important;
  font-size: 12px !important;
}

/* 装备面板 */
.pi-equip-slot {
  background: #3d3229 !important;
  border: 2px solid rgba(184,153,104,0.3) !important;
  border-radius: 6px !important;
}

.pi-equip-slot.equipped {
  border-color: #b89968 !important;
}

.pi-equip-slot-label {
  color: #9a8a75 !important;
  font-size: 12px !important;
}

.pi-equip-name {
  color: #f0e6d2 !important;
}

.pi-equip-level {
  color: #9a8a75 !important;
  font-size: 12px !important;
}

.pi-equip-attrs {
  color: #9a8a75 !important;
  font-size: 12px !important;
}

/* 修为面板 */
.pi-realm-display {
  background: #3d3229 !important;
  border: 1px solid rgba(184,153,104,0.3) !important;
  border-radius: 8px !important;
}

.pi-realm-name {
  color: #d4af37 !important;
  font-size: 24px !important;
  font-weight: bold !important;
}

.pi-cultivation-bar {
  background: #1f1a17 !important;
  border: 1px solid rgba(184,153,104,0.3) !important;
}

.pi-cultivation-fill {
  background: linear-gradient(90deg, #b89968, #d4af37) !important;
}

/* 统计面板 */
.pi-stats2-title {
  color: #d4af37 !important;
  font-size: 14px !important;
}

.pi-stats2-item {
  background: #3d3229 !important;
  border: 1px solid rgba(184,153,104,0.2) !important;
  border-radius: 6px !important;
}

.pi-stats2-item span {
  color: #9a8a75 !important;
}

.pi-stats2-item b {
  color: #d4af37 !important;
}

/* 社交面板 */
.pi-social-item {
  background: #3d3229 !important;
  border: 1px solid rgba(184,153,104,0.2) !important;
  border-radius: 6px !important;
}

.pi-social-label {
  color: #9a8a75 !important;
  font-size: 13px !important;
}

.pi-social-value {
  color: #f0e6d2 !important;
  font-weight: 500 !important;
}


/* 个人信息弹窗头像 */
.pi-avatar-frame {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  border: 3px solid #b89968 !important;
  overflow: hidden !important;
  margin: 0 auto 10px auto !important;
  box-shadow: 
    0 0 15px rgba(184,153,104,0.4),
    inset 0 0 10px rgba(0,0,0,0.3) !important;
  position: relative !important;
}

.pi-avatar-img {
  width: 130% !important;
  height: 130% !important;
  object-fit: cover !important;
  object-position: center top !important;
  margin-left: -15% !important;
  margin-top: -5% !important;
}


/* ========================================
   个人信息弹窗 - 水墨丹青版
   ======================================== */

.pi-modal {
  width: 900px !important;
  background: linear-gradient(180deg, #f5f0e6 0%, #ebe3d5 100%) !important;
  border: 3px solid #8b7355 !important;
  border-radius: 4px !important;
  box-shadow: 0 0 40px rgba(0,0,0,0.6) !important;
  overflow: hidden !important;
  position: relative !important;
}

.pi-modal::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 6px !important;
  background: linear-gradient(90deg, transparent, #8b7355, transparent) !important;
}

.pi-header {
  padding: 20px !important;
  text-align: center !important;
  border-bottom: 2px solid #8b7355 !important;
  position: relative !important;
}

.pi-title {
  color: #5c4a3a !important;
  font-size: 22px !important;
  font-weight: bold !important;
  letter-spacing: 8px !important;
}

.pi-close {
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #5c4a3a !important;
  color: #f5f0e6 !important;
  border: none !important;
  font-size: 18px !important;
  cursor: pointer !important;
}

.pi-hero {
  display: flex !important;
  padding: 25px !important;
  gap: 25px !important;
}

.pi-left {
  width: 200px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 15px !important;
}

.pi-avatar {
  width: 100px !important;
  height: 100px !important;
  border-radius: 50% !important;
  border: 3px solid #8b7355 !important;
  background-color: #d4c5a9 !important; /* 修复: 避免简写重置头像背景图 */
  overflow: hidden !important;
}

.pi-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.pi-portrait {
  width: 160px !important;
  height: 220px !important;
  background: linear-gradient(180deg, #e8dcc4, #d4c5a9) !important;
  border: 2px solid #8b7355 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.pi-portrait img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.pi-name {
  color: #3a2f23 !important;
  font-size: 22px !important;
  font-weight: bold !important;
}

.pi-title-tag {
  color: #8b6914 !important;
  font-size: 14px !important;
}

.pi-realm {
  color: #7a6a55 !important;
  font-size: 13px !important;
}

.pi-right {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
}

.pi-info-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

.pi-info-item {
  background: rgba(139,115,85,0.1) !important;
  border: 1px solid rgba(139,115,85,0.3) !important;
  border-radius: 6px !important;
  padding: 12px 15px !important;
}

.pi-info-label {
  color: #7a6a55 !important;
  font-size: 12px !important;
  margin-bottom: 4px !important;
}

.pi-info-value {
  color: #3a2f23 !important;
  font-size: 16px !important;
  font-weight: bold !important;
}

.pi-red {
  color: #c0392b !important;
}

.pi-blue {
  color: #2980b9 !important;
}

.pi-bars {
  background: rgba(139,115,85,0.1) !important;
  border: 1px solid rgba(139,115,85,0.3) !important;
  border-radius: 6px !important;
  padding: 15px !important;
}

.pi-bar-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.pi-bar-row:last-child {
  margin-bottom: 0 !important;
}

.pi-bar-label {
  color: #5c4a3a !important;
  font-size: 13px !important;
  width: 40px !important;
  font-weight: 500 !important;
}

.pi-bar {
  flex: 1 !important;
  height: 16px !important;
  background-color: #d4c5a9 !important; /* 修复: 避免简写重置头像背景图 */
  border-radius: 8px !important;
  overflow: hidden !important;
}

.pi-bar-fill {
  height: 100% !important;
  border-radius: 8px !important;
}

.pi-hp {
  background: linear-gradient(90deg, #c0392b, #e74c3c) !important;
}

.pi-mp {
  background: linear-gradient(90deg, #2980b9, #3498db) !important;
}

.pi-exp {
  background: linear-gradient(90deg, #8b6914, #b8860b) !important;
}

.pi-bar-text {
  color: #5c4a3a !important;
  font-size: 12px !important;
  width: 70px !important;
  text-align: right !important;
}

.pi-tabs {
  display: flex !important;
  background: rgba(139,115,85,0.15) !important;
  border-top: 1px solid #8b7355 !important;
  border-bottom: 1px solid #8b7355 !important;
}

.pi-tab {
  flex: 1 !important;
  padding: 12px !important;
  text-align: center !important;
  color: #7a6a55 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  font-size: 14px !important;
}

.pi-tab.active {
  background: #f5f0e6 !important;
  color: #5c4a3a !important;
  font-weight: bold !important;
  border-bottom: 3px solid #8b6914 !important;
}

.pi-content {
  padding: 20px !important;
  min-height: 220px !important;
}

.pi-section-title {
  color: #5c4a3a !important;
  font-size: 15px !important;
  font-weight: bold !important;
  margin: 0 0 12px 0 !important;
  padding-left: 10px !important;
  border-left: 3px solid #8b6914 !important;
}

.pi-section-title:first-child {
  margin-top: 0 !important;
}

.pi-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}

.pi-stat-item {
  background: rgba(139,115,85,0.1) !important;
  border: 1px solid rgba(139,115,85,0.2) !important;
  border-radius: 6px !important;
  padding: 12px !important;
  text-align: center !important;
}

.pi-stat-name {
  color: #7a6a55 !important;
  font-size: 12px !important;
  margin-bottom: 6px !important;
}

.pi-stat-val {
  color: #3a2f23 !important;
  font-size: 20px !important;
  font-weight: bold !important;
}

.pi-hidden-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.pi-hidden-item {
  display: flex !important;
  gap: 12px !important;
  background: rgba(139,115,85,0.1) !important;
  border: 1px solid rgba(139,115,85,0.2) !important;
  border-radius: 6px !important;
  padding: 12px !important;
}

.pi-hidden-icon {
  font-size: 24px !important;
}

.pi-hidden-info {
  flex: 1 !important;
}

.pi-hidden-row {
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 6px !important;
}

.pi-hidden-name {
  color: #5c4a3a !important;
  font-weight: 500 !important;
}

.pi-hidden-val {
  color: #8b6914 !important;
  font-weight: bold !important;
}

.pi-hidden-bar {
  height: 8px !important;
  background-color: #d4c5a9 !important; /* 修复: 避免简写重置头像背景图 */
  border-radius: 4px !important;
  overflow: hidden !important;
  margin-bottom: 4px !important;
}

.pi-hidden-fill {
  height: 100% !important;
  background: #8b6914 !important;
}

.pi-hidden-desc {
  color: #7a6a55 !important;
  font-size: 12px !important;
}

.pi-equip-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}

.pi-equip-slot {
  background: rgba(139,115,85,0.1) !important;
  border: 1px solid rgba(139,115,85,0.2) !important;
  border-radius: 6px !important;
  padding: 12px !important;
  text-align: center !important;
}

.pi-equip-label {
  color: #7a6a55 !important;
  font-size: 12px !important;
  margin-bottom: 8px !important;
}

.pi-equip-empty {
  color: #a89880 !important;
  font-size: 13px !important;
  padding: 20px 0 !important;
}

.pi-equip-name {
  color: #5c4a3a !important;
  font-size: 13px !important;
  margin-top: 6px !important;
}

.pi-realm-box {
  text-align: center !important;
  padding: 20px !important;
}

.pi-realm-current {
  margin-bottom: 15px !important;
}

.pi-realm-label {
  color: #7a6a55 !important;
  font-size: 14px !important;
  display: block !important;
}

.pi-realm-name {
  color: #5c4a3a !important;
  font-size: 28px !important;
  font-weight: bold !important;
  display: block !important;
  margin: 5px 0 !important;
}

.pi-realm-sub {
  color: #7a6a55 !important;
  font-size: 14px !important;
}

.pi-realm-bar {
  height: 20px !important;
  background-color: #d4c5a9 !important; /* 修复: 避免简写重置头像背景图 */
  border-radius: 10px !important;
  overflow: hidden !important;
}

.pi-realm-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #8b6914, #b8860b) !important;
}

.pi-social-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

.pi-social-item {
  display: flex !important;
  justify-content: space-between !important;
  background: rgba(139,115,85,0.1) !important;
  border: 1px solid rgba(139,115,85,0.2) !important;
  border-radius: 6px !important;
  padding: 12px 15px !important;
}

.pi-social-label {
  color: #7a6a55 !important;
}

.pi-social-val {
  color: #5c4a3a !important;
  font-weight: 500 !important;
}

.pi-footer {
  padding: 15px 20px !important;
  background: rgba(139,115,85,0.1) !important;
  border-top: 1px solid #8b7355 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
}

.pi-btn {
  padding: 10px 24px !important;
  border-radius: 4px !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
}

.pi-btn-primary {
  background: linear-gradient(180deg, #8b6914, #6b4f10) !important;
  color: #f5f0e6 !important;
}

.pi-btn-secondary {
  background: transparent !important;
  color: #5c4a3a !important;
  border: 1px solid #8b7355 !important;
}

.pi-empty-tip {
  text-align: center !important;
  color: #7a6a55 !important;
  padding: 40px !important;
}


/* ========================================
   个人信息弹窗 - 尺寸修正
   ======================================== */

.pi-modal {
  width: 780px !important;
  max-width: 95vw !important;
  height: 620px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
}

.pi-header {
  flex-shrink: 0 !important;
}

.pi-hero {
  flex-shrink: 0 !important;
  padding: 18px 25px !important;
  gap: 20px !important;
}

.pi-left {
  width: 160px !important;
  gap: 10px !important;
}

.pi-avatar {
  width: 80px !important;
  height: 80px !important;
}

.pi-portrait {
  width: 120px !important;
  height: 170px !important;
}

.pi-name {
  font-size: 18px !important;
}

.pi-info-grid {
  gap: 8px !important;
}

.pi-info-item {
  padding: 8px 12px !important;
}

.pi-bars {
  padding: 10px 12px !important;
}

.pi-bar-row {
  margin-bottom: 6px !important;
}

.pi-bar {
  height: 12px !important;
}

.pi-tabs {
  flex-shrink: 0 !important;
}

.pi-tab {
  padding: 10px !important;
  font-size: 13px !important;
}

.pi-content {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 15px !important;
}

.pi-stats-grid {
  gap: 8px !important;
  margin-bottom: 15px !important;
}

.pi-stat-item {
  padding: 10px !important;
}

.pi-stat-val {
  font-size: 18px !important;
}

.pi-hidden-item {
  padding: 10px !important;
  gap: 10px !important;
}

.pi-equip-grid {
  gap: 8px !important;
}

.pi-equip-slot {
  padding: 10px !important;
}

.pi-footer {
  flex-shrink: 0 !important;
  padding: 12px 20px !important;
  gap: 10px !important;
}

.pi-btn {
  padding: 8px 20px !important;
  font-size: 13px !important;
}


/* ========================================
   个人信息弹窗 - 布局优化版
   ======================================== */

.pi-modal {
  width: 820px !important;
  height: 680px !important;
}

.pi-header {
  padding: 12px 20px !important;
}

.pi-title {
  font-size: 20px !important;
  letter-spacing: 6px !important;
}

.pi-close {
  width: 28px !important;
  height: 28px !important;
  font-size: 16px !important;
}

.pi-hero {
  padding: 12px 20px !important;
  gap: 15px !important;
}

.pi-left {
  width: 140px !important;
  gap: 8px !important;
}

.pi-avatar {
  width: 70px !important;
  height: 70px !important;
}

.pi-portrait {
  width: 100px !important;
  height: 140px !important;
}

.pi-name {
  font-size: 18px !important;
}

.pi-title-tag {
  font-size: 13px !important;
}

.pi-realm {
  font-size: 12px !important;
}

.pi-info-grid {
  gap: 6px !important;
}

.pi-info-item {
  padding: 6px 10px !important;
}

.pi-info-label {
  font-size: 11px !important;
  margin-bottom: 2px !important;
}

.pi-info-value {
  font-size: 15px !important;
}

.pi-bars {
  padding: 8px 10px !important;
}

.pi-bar-row {
  margin-bottom: 5px !important;
}

.pi-bar-label {
  font-size: 12px !important;
  width: 36px !important;
}

.pi-bar {
  height: 11px !important;
}

.pi-bar-text {
  font-size: 11px !important;
  width: 65px !important;
}

.pi-tabs {
  padding: 0 !important;
}

.pi-tab {
  padding: 8px !important;
  font-size: 13px !important;
}

.pi-content {
  padding: 12px 15px !important;
}

.pi-section-title {
  font-size: 14px !important;
  margin-bottom: 8px !important;
}

.pi-stats-grid {
  gap: 6px !important;
  margin-bottom: 12px !important;
}

.pi-stat-item {
  padding: 8px !important;
}

.pi-stat-name {
  font-size: 11px !important;
  margin-bottom: 3px !important;
}

.pi-stat-val {
  font-size: 16px !important;
}

.pi-hidden-item {
  padding: 8px !important;
  gap: 8px !important;
}

.pi-hidden-icon {
  font-size: 20px !important;
}

.pi-hidden-bar {
  height: 6px !important;
  margin-bottom: 3px !important;
}

.pi-hidden-desc {
  font-size: 11px !important;
}

.pi-equip-grid {
  gap: 6px !important;
}

.pi-equip-slot {
  padding: 8px !important;
}

.pi-equip-label {
  font-size: 11px !important;
  margin-bottom: 5px !important;
}

.pi-equip-name {
  font-size: 12px !important;
  margin-top: 4px !important;
}

.pi-footer {
  padding: 10px 20px !important;
  gap: 8px !important;
}

.pi-btn {
  padding: 7px 18px !important;
  font-size: 13px !important;
}


/* ========================================
   个人信息弹窗 - 科学比例版
   ======================================== */

.pi-modal {
  width: 720px !important;
  height: 660px !important;
}

.pi-hero {
  padding: 12px 18px !important;
  gap: 15px !important;
}

.pi-left {
  width: 120px !important;
  gap: 8px !important;
}

.pi-avatar {
  width: 65px !important;
  height: 65px !important;
}

.pi-portrait {
  width: 90px !important;
  height: 130px !important;
}

.pi-name {
  font-size: 17px !important;
}

.pi-title-tag {
  font-size: 12px !important;
}

.pi-realm {
  font-size: 11px !important;
}

.pi-info-grid {
  gap: 6px !important;
}

.pi-info-item {
  padding: 5px 10px !important;
}

.pi-bars {
  padding: 6px 10px !important;
}

.pi-bar-row {
  margin-bottom: 4px !important;
}

.pi-bar {
  height: 10px !important;
}

.pi-content {
  padding: 12px 15px !important;
}

.pi-stats-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
}

.pi-stat-item {
  padding: 7px !important;
}

.pi-stat-val {
  font-size: 16px !important;
}

.pi-equip-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
}

.pi-equip-slot {
  padding: 7px !important;
}

.pi-hidden-item {
  padding: 7px !important;
}

.pi-footer {
  padding: 10px 15px !important;
  gap: 8px !important;
}


/* ========================================
   个人信息弹窗 - 右侧信息区收窄
   ======================================== */

.pi-right {
  flex: none !important;
  width: 480px !important;
  max-width: 480px !important;
}

.pi-info-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
}

.pi-bars {
  width: 100% !important;
}

.pi-content {
  width: 100% !important;
}


.pi-modal {
  width: 680px !important;
}


/* ========================================
   个人信息弹窗 - 立绘增大版
   ======================================== */

.pi-left {
  width: 160px !important;
  gap: 10px !important;
}

.pi-avatar {
  width: 75px !important;
  height: 75px !important;
}

.pi-portrait {
  width: 120px !important;
  height: 180px !important;
}

.pi-name {
  font-size: 18px !important;
}

.pi-right {
  width: 430px !important;
  max-width: 430px !important;
}

.pi-info-item {
  padding: 6px 10px !important;
}

.pi-bars {
  padding: 8px 10px !important;
}


/* ========================================
   个人信息弹窗 - 顶部信息栏调整
   ======================================== */

.pi-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 20px !important;
}

.pi-header-left {
  text-align: left !important;
  flex: 1 !important;
}

.pi-header-left .pi-name {
  font-size: 20px !important;
  font-weight: bold !important;
  color: #3a2f23 !important;
  margin: 0 !important;
}

.pi-header-left .pi-title-tag {
  font-size: 13px !important;
  color: #8b6914 !important;
  margin: 2px 0 !important;
}

.pi-header-left .pi-realm {
  font-size: 12px !important;
  color: #7a6a55 !important;
  margin: 0 !important;
}

.pi-title {
  flex: 1 !important;
  text-align: center !important;
}

.pi-left {
  justify-content: flex-start !important;
  gap: 12px !important;
}

.pi-portrait {
  width: 130px !important;
  height: 200px !important;
}


/* ========================================
   个人信息弹窗 - 头像置顶+立绘居中版
   ======================================== */

.pi-modal {
  width: 620px !important;
  height: 700px !important;
}

.pi-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.pi-header-avatar {
  width: 55px !important;
  height: 55px !important;
  border-radius: 50% !important;
  border: 2px solid #8b7355 !important;
  overflow: hidden !important;
  background-color: #d4c5a9 !important; /* 修复: 避免简写重置头像背景图 */
}

.pi-header-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.pi-header-text {
  text-align: left !important;
}

.pi-hero {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 15px 20px !important;
}

.pi-info-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
}

.pi-portrait-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 10px 0 !important;
}

.pi-portrait-center .pi-portrait {
  width: 180px !important;
  height: 260px !important;
  background: linear-gradient(180deg, #e8dcc4, #d4c5a9) !important;
  border: 2px solid #8b7355 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.pi-portrait-center .pi-portrait img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.pi-bars {
  padding: 10px 15px !important;
}


/* ========================================
   个人信息弹窗 - 属性在立绘两侧版
   ======================================== */

.pi-hero {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 15px !important;
  padding: 15px 20px !important;
}

.pi-info-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  flex: 1 !important;
}

.pi-portrait-center {
  flex: none !important;
}

.pi-portrait-center .pi-portrait {
  width: 160px !important;
  height: 230px !important;
}

.pi-bars {
  grid-column: 1 / -1 !important;
}


.pi-info-side {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}


/* ========================================
   个人信息弹窗 - 比例优化版
   ======================================== */

.pi-modal {
  width: 680px !important;
}

.pi-hero {
  gap: 20px !important;
  padding: 15px 25px !important;
}

.pi-info-side {
  flex: 1 !important;
  gap: 12px !important;
}

.pi-info-item {
  padding: 12px 15px !important;
}

.pi-info-label {
  font-size: 13px !important;
  margin-bottom: 5px !important;
}

.pi-info-value {
  font-size: 18px !important;
}

.pi-portrait-center .pi-portrait {
  width: 160px !important;
  height: 220px !important;
}


/* ========================================
   个人信息弹窗 - 紧凑优化版
   ======================================== */

.pi-modal {
  height: 660px !important;
}

.pi-hero {
  gap: 12px !important;
  padding: 10px 20px !important;
}

.pi-info-side {
  flex: 0 0 120px !important;
  gap: 8px !important;
}

.pi-info-item {
  padding: 8px 12px !important;
}

.pi-info-label {
  font-size: 12px !important;
  margin-bottom: 3px !important;
}

.pi-info-value {
  font-size: 16px !important;
}

.pi-portrait-center .pi-portrait {
  width: 170px !important;
  height: 230px !important;
}

.pi-bars {
  padding: 8px 15px !important;
}

.pi-bar-row {
  margin-bottom: 4px !important;
}


/* ========================================
   个人信息弹窗 - 专业对齐版
   ======================================== */

.pi-hero {
  height: 260px !important;
  align-items: stretch !important;
  gap: 15px !important;
  padding: 10px 20px !important;
}

.pi-info-side {
  flex: 0 0 130px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.pi-info-item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.pi-portrait-center {
  flex: none !important;
  display: flex !important;
  align-items: stretch !important;
}

.pi-portrait-center .pi-portrait {
  width: 180px !important;
  height: 100% !important;
}


/* ========================================
   个人信息弹窗 - 左侧垂直菜单版
   ======================================== */

.pi-body {
  display: flex !important;
  flex: 1 !important;
  overflow: hidden !important;
}

.pi-tabs {
  flex: 0 0 90px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  border-right: 1px solid #8b7355 !important;
  padding: 8px 6px !important;
}

.pi-tab {
  padding: 8px 10px !important;
  text-align: center !important;
  border-radius: 4px !important;
  border: none !important;
  border-bottom: none !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.pi-tab.active {
  background: #8b7355 !important;
  color: #f5f0e6 !important;
}

.pi-tab:hover {
  background: rgba(139,115,85,0.2) !important;
}

.pi-content {
  flex: 1 !important;
  padding: 12px 15px !important;
  overflow-y: auto !important;
}

.pi-modal {
  height: 680px !important;
}


/* ========================================
   个人信息弹窗 - 左侧垂直菜单修正版
   ======================================== */

.pi-modal {
  display: flex !important;
  flex-direction: column !important;
}

.pi-hero + .pi-bars + .pi-tabs {
  flex: 0 0 auto !important;
}

.pi-tabs {
  display: flex !important;
  flex-direction: row !important;
}

.pi-content {
  flex: 1 !important;
  overflow-y: auto !important;
}


/* ========================================
   个人信息弹窗 - 左侧垂直菜单最终版
   ======================================== */

.pi-body {
  display: flex !important;
  flex: 1 !important;
  overflow: hidden !important;
}

.pi-tabs {
  flex: 0 0 90px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  border-right: 1px solid #8b7355 !important;
  padding: 8px 6px !important;
}

.pi-tab {
  padding: 10px 8px !important;
  text-align: center !important;
  border-radius: 4px !important;
  border: none !important;
  border-bottom: none !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

.pi-tab.active {
  background: #8b7355 !important;
  color: #f5f0e6 !important;
}

.pi-tab:hover {
  background: rgba(139,115,85,0.2) !important;
}

.pi-content {
  flex: 1 !important;
  padding: 12px 15px !important;
  overflow-y: auto !important;
}


/* ========================================
   个人信息弹窗 - 强制左侧垂直菜单
   ======================================== */

.pi-modal .pi-body {
  display: flex !important;
  flex-direction: row !important;
  flex: 1 !important;
  overflow: hidden !important;
}

.pi-modal .pi-tabs {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 90px !important;
  gap: 4px !important;
  border-right: 1px solid #8b7355 !important;
  border-bottom: none !important;
  padding: 8px 6px !important;
}

.pi-modal .pi-tab {
  border: none !important;
  border-bottom: none !important;
  border-radius: 4px !important;
  text-align: center !important;
  padding: 10px 5px !important;
}

.pi-modal .pi-content {
  flex: 1 !important;
  overflow-y: auto !important;
}


/* ========================================
   个人信息弹窗 - 终极强制左侧菜单
   ======================================== */

.player-info-modal-overlay .pi-modal .pi-body {
  display: flex !important;
  flex-direction: row !important;
  flex: 1 !important;
  min-height: 0 !important;
}

.player-info-modal-overlay .pi-modal .pi-body .pi-tabs {
  display: flex !important;
  flex-direction: column !important;
  width: 90px !important;
  min-width: 90px !important;
  flex: 0 0 90px !important;
  gap: 4px !important;
  border-right: 1px solid #8b7355 !important;
  border-bottom: none !important;
  padding: 8px 6px !important;
}

.player-info-modal-overlay .pi-modal .pi-body .pi-tabs .pi-tab {
  border: none !important;
  border-bottom: none !important;
  border-radius: 4px !important;
  text-align: center !important;
  padding: 10px 5px !important;
  margin: 0 !important;
}

.player-info-modal-overlay .pi-modal .pi-body .pi-content {
  flex: 1 !important;
  min-width: 0 !important;
  overflow-y: auto !important;
}


/* ========================================
   个人信息弹窗 - 修复pi-modal为flex容器
   ======================================== */

.player-info-modal-overlay .pi-modal {
  display: flex !important;
  flex-direction: column !important;
}

.player-info-modal-overlay .pi-modal .pi-header {
  flex: 0 0 auto !important;
}

.player-info-modal-overlay .pi-modal .pi-hero {
  flex: 0 0 auto !important;
}

.player-info-modal-overlay .pi-modal .pi-bars {
  flex: 0 0 auto !important;
}

.player-info-modal-overlay .pi-modal .pi-body {
  display: flex !important;
  flex-direction: row !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* ========================================
   个人信息弹窗 - 立绘主角版（最终）
   ======================================== */

/* Hero：立绘区域加宽为主角，两侧信息卡缩窄 */
.pi-hero.pi-hero-portrait {
  height: 250px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 8px 14px !important;
}

.pi-hero-portrait .pi-info-side {
  flex: 0 0 118px !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

.pi-hero-portrait .pi-info-side .pi-info-item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 4px 8px !important;
  min-height: 0 !important;
}

.pi-hero-portrait .pi-info-side .pi-info-label {
  font-size: 10px !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
}

.pi-hero-portrait .pi-info-side .pi-info-value {
  font-size: 13px !important;
  line-height: 1.25 !important;
  word-break: break-all !important;
}

.pi-hero-portrait .pi-portrait-center {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0 4px !important;
}

.pi-hero-portrait .pi-portrait-center .pi-portrait {
  width: 260px !important;
  max-width: 100% !important;
  height: 210px !important;
  flex: none !important;
}

.pi-hero-portrait .pi-portrait-center .pi-portrait img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* 签名显示与编辑 */
.pi-signature {
  color: #7a6a55 !important;
  font-size: 12px !important;
  font-style: italic !important;
  max-width: 280px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.pi-signature-edit {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
}

.pi-signature-edit input {
  width: 170px !important;
  padding: 3px 8px !important;
  border: 1px solid #8b7355 !important;
  border-radius: 4px !important;
  background: #fffdf7 !important;
  color: #3a2f23 !important;
  font-size: 12px !important;
  outline: none !important;
}

.pi-signature-edit button {
  padding: 3px 10px !important;
  border: 1px solid #8b7355 !important;
  border-radius: 4px !important;
  background: #f5f0e6 !important;
  color: #5c4a3a !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

/* 左侧菜单：图标 + 文字 */
.player-info-modal-overlay .pi-modal .pi-body .pi-tabs .pi-tab {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 8px 4px !important;
}

.pi-tab-icon {
  font-size: 17px !important;
  line-height: 1 !important;
}

.pi-tab-name {
  font-size: 12px !important;
}

/* 状态条文字加宽（修为显示 当前/所需） */
.pi-bars .pi-bar-text {
  width: 88px !important;
  font-size: 11px !important;
}

/* 装备：属性与总加成 */
.pi-equip-attr {
  font-size: 10px !important;
  color: #7a6a55 !important;
  margin-top: 2px !important;
  line-height: 1.3 !important;
}

.pi-equip-summary {
  margin-top: 10px !important;
  padding: 8px 12px !important;
  background: rgba(139,115,85,0.12) !important;
  border: 1px dashed #8b7355 !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  color: #5c4a3a !important;
  text-align: center !important;
}

/* 技能列表 */
.pi-skill-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.pi-skill-item {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  background: rgba(139,115,85,0.1) !important;
  border: 1px solid rgba(139,115,85,0.25) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
}

.pi-skill-icon {
  font-size: 22px !important;
}

.pi-skill-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.pi-skill-row {
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 4px !important;
}

.pi-skill-name {
  color: #3a2f23 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.pi-skill-level {
  color: #8b6914 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.pi-skill-desc {
  color: #7a6a55 !important;
  font-size: 12px !important;
}

/* 修为：境界链 */
.pi-realm-chain {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
}

.pi-realm-node {
  flex: 1 !important;
  text-align: center !important;
  padding: 8px 4px !important;
  border: 1px solid rgba(139,115,85,0.3) !important;
  border-radius: 6px !important;
  background: rgba(139,115,85,0.06) !important;
}

.pi-realm-node.passed {
  opacity: 0.55 !important;
}

.pi-realm-node.current {
  background: rgba(139,115,85,0.15) !important;
  box-shadow: 0 0 10px rgba(139,115,85,0.3) !important;
  border-width: 2px !important;
}

.pi-realm-node-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #5c4a3a !important;
  margin-bottom: 6px !important;
}

.pi-realm-node-stages {
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
}

.pi-realm-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: #d4c5a9 !important; /* 修复: 避免简写重置头像背景图 */
  border: 1px solid #a89880 !important;
}

.pi-realm-dot.lit {
  background: #8b6914 !important;
  border-color: #8b6914 !important;
}

.pi-realm-next {
  font-size: 12px !important;
  color: #7a6a55 !important;
  padding: 6px 10px !important;
  background: rgba(139,115,85,0.08) !important;
  border-radius: 4px !important;
  margin-bottom: 10px !important;
}

.pi-realm-action {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: center !important;
}

.pi-realm-hint {
  font-size: 11px !important;
  color: #a89880 !important;
}

.pi-breakthrough-msg {
  margin-bottom: 8px !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  background: rgba(139,105,20,0.15) !important;
  border: 1px solid #8b6914 !important;
  color: #6b4f10 !important;
  font-size: 13px !important;
  text-align: center !important;
}

/* 统计：江湖战绩 */
.pi-stats2-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

.pi-stats2-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(139,115,85,0.1) !important;
  border: 1px solid rgba(139,115,85,0.2) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
}

.pi-stats2-icon {
  font-size: 22px !important;
}

.pi-stats2-name {
  font-size: 11px !important;
  color: #7a6a55 !important;
}

.pi-stats2-val {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #3a2f23 !important;
}

/* 社交提示 */
.pi-social-tip {
  margin-top: 10px !important;
  text-align: center !important;
  font-size: 11px !important;
  color: #a89880 !important;
}

/* 浮层面板（头像选择 / 战力构成） */
.pi-float-panel {
  position: absolute !important;
  right: 20px !important;
  bottom: 62px !important;
  z-index: 20 !important;
  background: linear-gradient(180deg, #fdf8ee, #f2ead9) !important;
  border: 2px solid #8b7355 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35) !important;
  padding: 12px !important;
}

.pi-float-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #5c4a3a !important;
  margin-bottom: 10px !important;
  text-align: center !important;
  letter-spacing: 2px !important;
}

/* 头像选择 */
.pi-avatar-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
}

.pi-avatar-opt {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  background-color: #d4c5a9 !important; /* 修复: 避免简写重置头像背景图 */
  overflow: hidden !important;
  transition: all 0.2s !important;
}

.pi-avatar-opt:hover {
  border-color: #8b7355 !important;
  transform: scale(1.06) !important;
}

.pi-avatar-opt.selected {
  border-color: #8b6914 !important;
  box-shadow: 0 0 0 3px rgba(139,105,20,0.3) !important;
}

.pi-avatar-opt-img {
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
}

/* 战力构成 */
.pi-power-detail {
  width: 300px !important;
}

.pi-power-bar {
  display: flex !important;
  height: 14px !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
}

.pi-power-seg {
  height: 100% !important;
}

.pi-power-equip {
  background: linear-gradient(90deg, #c0392b, #e74c3c) !important;
}

.pi-power-skill {
  background: linear-gradient(90deg, #2980b9, #3498db) !important;
}

.pi-power-cult {
  background: linear-gradient(90deg, #8b6914, #b8860b) !important;
}

.pi-power-legend {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  font-size: 12px !important;
  color: #5c4a3a !important;
}

.pi-power-legend span {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.pi-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

.pi-dot-equip {
  background: #c0392b !important;
}

.pi-dot-skill {
  background: #2980b9 !important;
}

.pi-dot-cult {
  background: #8b6914 !important;
}

/* ========================================
   立绘主角版 v2：tab 六项完整显示（图标+文字横排紧凑）
   ======================================== */

.player-info-modal-overlay .pi-modal .pi-body .pi-tabs {
  gap: 2px !important;
  padding: 6px 4px !important;
  overflow-y: auto !important;
}

.player-info-modal-overlay .pi-modal .pi-body .pi-tabs .pi-tab {
  flex-direction: row !important;
  padding: 3px 2px !important;
  gap: 4px !important;
  justify-content: center !important;
}

.pi-tab-icon {
  font-size: 13px !important;
  line-height: 1 !important;
}

.pi-tab-name {
  font-size: 11px !important;
}

/* ===== 个人信息弹窗 - 显示与头像修复 =====
   问题1: 全局 [class*="-modal"] 动画在部分环境下不推进, 弹窗停在 opacity:0 完全不可见
          -> 禁用动画并强制 opacity:1, 保证弹窗始终可见
   问题2: .pi-header-avatar 的 background 简写 !important 会重置内联的
          background-image/position/size, 导致左上角头像只显示棕色圆底、永远不变化
          -> 改为 background-color 只设底色, 不触碰内联背景图
*/
.player-info-modal-overlay {
  animation: none !important;
  opacity: 1 !important;
}
.player-info-modal-overlay .pi-modal {
  animation: none !important;
  opacity: 1 !important;
}
.pi-header-avatar {
  background-color: #d4c5a9 !important;
}
.pi-avatar-opt {
  background-color: #d4c5a9 !important;
}

/* ===== 个人信息弹窗 - 装备图标与战力构成完善 ===== */
.pi-equip-icon-wrap {
  width: 48px !important;
  height: 48px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pi-equip-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}
.pi-power-seg.pi-power-base {
  background: #7f8c8d !important;
}
.pi-dot-base {
  background: #7f8c8d !important;
}


/* ===== 个人信息弹窗 - 交互完善（突破置灰/装备详情/好友入口） ===== */
.pi-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}
.pi-realm-hint-warn {
  color: #c0392b !important;
}
.pi-equip-slot {
  cursor: pointer !important;
}
.pi-equip-detail {
  position: absolute !important;
  right: 20px !important;
  bottom: 62px !important;
  width: 300px !important;
  z-index: 25 !important;
  background: linear-gradient(180deg, #fdf8ee, #f2ead9) !important;
  border: 2px solid #8b7355 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35) !important;
  padding: 12px !important;
}
.pi-equip-detail-main {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}
.pi-equip-detail-icon {
  width: 56px !important;
  height: 56px !important;
  background: rgba(139,115,85,0.12) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.pi-equip-detail-icon img {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
}
.pi-equip-detail-name {
  font-size: 15px !important;
  font-weight: bold !important;
  color: #3d2817 !important;
}
.pi-equip-detail-quality {
  font-size: 12px !important;
}
.pi-equip-detail-slot {
  font-size: 11px !important;
  color: #8b7355 !important;
  margin-top: 2px !important;
}
.pi-equip-detail-attrs {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 4px 10px !important;
  padding: 8px 0 !important;
  border-top: 1px dashed rgba(139,115,85,0.3) !important;
  border-bottom: 1px dashed rgba(139,115,85,0.3) !important;
}
.pi-equip-detail-attr {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  color: #5c4a3a !important;
}
.pi-equip-detail-attr b {
  color: #8b6914 !important;
}
.pi-equip-detail-desc {
  font-size: 12px !important;
  color: #7a6a55 !important;
  padding: 8px 0 !important;
}
.pi-equip-detail-actions {
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}
.pi-equip-detail-actions .pi-btn {
  padding: 6px 16px !important;
  font-size: 12px !important;
}
.pi-social-friends-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 10px !important;
}
.pi-social-friends-btn .pi-btn {
  padding: 6px 16px !important;
  font-size: 12px !important;
}
.pi-social-friends-btn .pi-social-tip {
  font-size: 11px !important;
  color: #7a6a55 !important;
}

/* ===== 装备栏纯图标模式 ===== */
.pi-equip-icon-wrap {
  width: 54px !important;
  height: 54px !important;
  position: relative !important;
}
.pi-equip-icon-img {
  transition: transform 0.2s !important;
}
.pi-equip-slot:hover .pi-equip-icon-img {
  transform: scale(1.1);
}
.pi-equip-hover-tip {
  position: absolute !important;
  bottom: -2px !important;
  left: 50% !important;
  transform: translateX(-50%);
  font-size: 10px !important;
  color: #fff !important;
  background: rgba(139,105,20,0.85) !important;
  border-radius: 3px !important;
  padding: 1px 5px !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  transition: opacity 0.2s !important;
  pointer-events: none !important;
  z-index: 2;
}
.pi-equip-slot:hover .pi-equip-hover-tip {
  opacity: 1 !important;
}

/* ===== 装备槽紧凑居中 ===== */
.pi-equip-slot {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 4px !important;
  min-height: 88px !important;
}
.pi-equip-label {
  margin-bottom: 4px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}
.pi-equip-icon-wrap {
  margin: 0 auto !important;
}
.pi-equip-empty {
  padding: 12px 0 !important;
  font-size: 12px !important;
}
.pi-equip-summary {
  margin-top: 8px !important;
  padding-top: 6px !important;
}

/* ===== 装备详情品质徽章（深底保可读） ===== */
.pi-equip-detail-quality {
  display: inline-block !important;
  padding: 1px 8px !important;
  border-radius: 3px !important;
  background: rgba(61, 40, 23, 0.78) !important;
  margin-top: 3px !important;
  line-height: 1.4 !important;
  text-shadow: none !important;
}

/* ===== 字体颜色可读性修复 =====
   1) 打坐提示: 半透明黑底加深, 亮色文字更清晰
   2) 打坐浮动数字: 加深色描边, 任何背景可读
   3) 商铺横幅: 深红字改白字(红底上原来看不清)
*/
.meditation-exp,
.meditation-cult {
  background: rgba(0, 0, 0, 0.75) !important;
}
.meditation-float-number {
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 4px rgba(0,0,0,0.55) !important;
}
.banner-tag {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45) !important;
}


/* ===== 修炼增益面板 ===== */
.cult-buff-panel {
  background: rgba(10, 20, 35, 0.85);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 10px;
  padding: 10px;
  margin-top: 6px;
}
.buff-block-title {
  font-size: 12px;
  color: #ffd700;
  margin: 6px 0 4px;
  letter-spacing: 1px;
}
.buff-block-title:first-child { margin-top: 0; }
.buff-loc-row, .buff-pill-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.buff-loc-btn, .buff-pill-btn {
  flex: 1;
  min-width: 62px;
  padding: 5px 4px;
  font-size: 12px;
  color: #cfe8ff;
  background: rgba(40, 70, 120, 0.55);
  border: 1px solid rgba(120, 170, 255, 0.35);
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.buff-loc-btn:hover, .buff-pill-btn:hover { background: rgba(60, 100, 170, 0.7); }
.buff-loc-btn.active, .buff-pill-btn.active {
  background: rgba(255, 180, 20, 0.9);
  color: #1a1205;
  border-color: #ffd700;
  font-weight: bold;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}
.buff-loc-btn.locked, .buff-pill-btn.locked {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}
.buff-gain-breakdown {
  margin-top: 8px;
  border-top: 1px dashed rgba(255, 215, 0, 0.3);
  padding-top: 6px;
}
.buff-breakdown-title {
  font-size: 12px;
  color: #ffd700;
  margin-bottom: 4px;
}
.buff-breakdown-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #bcd8f5;
  padding: 2px 0;
}
.buff-breakdown-total {
  margin-top: 4px;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  color: #4ade80;
  background: rgba(20, 80, 40, 0.35);
  border-radius: 5px;
  padding: 3px 0;
}
.talisman-toggle {
  padding: 3px 8px;
  font-size: 12px;
  color: #e6d9a8;
  background: rgba(120, 90, 20, 0.4);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 5px;
  cursor: pointer;
}
.talisman-toggle.active {
  background: rgba(255, 180, 20, 0.85);
  color: #1a1205;
  font-weight: bold;
}
.talisman-toggle.locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.cult-log-text.hist { color: #8fa3bf; }
.cult-log-item .cult-log-time { min-width: 78px; }

/* 修炼境界称号徽章 */
.cult-realm-title-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 12px;
  font-size: 12px;
  letter-spacing: 1px;
  background: rgba(10, 20, 35, 0.75);
  border: 1px solid;
  border-radius: 20px;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
}

/* ===== 每日修炼任务面板 ===== */
.daily-cult-box {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(10, 18, 30, 0.6);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 8px;
}
.daily-cult-box .cult-panel-title {
  margin-bottom: 6px;
  font-size: 12px;
}
.daily-cult-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.daily-cult-row:last-child {
  border-bottom: none;
}
.daily-cult-row.claimed {
  opacity: 0.55;
}
.daily-cult-row.ready {
  background: rgba(255, 215, 0, 0.08);
  border-radius: 4px;
}
.daily-cult-info {
  flex: 1;
  min-width: 0;
}
.daily-cult-name {
  font-size: 11px;
  color: #d8c9a3;
  margin-bottom: 3px;
}
.daily-cult-bar {
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}
.daily-cult-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd700, #ff9800);
  border-radius: 3px;
  transition: width 0.4s;
}
.daily-cult-reward {
  font-size: 10px;
  color: #9d8f6f;
  white-space: nowrap;
}
.daily-cult-state {
  font-size: 10px;
  color: #7d8fa3;
  white-space: nowrap;
}
.daily-cult-state.done {
  color: #4caf50;
}
.daily-cult-claim {
  padding: 3px 10px;
  font-size: 11px;
  color: #1a1510;
  background: linear-gradient(135deg, #ffd700, #ff9800);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.daily-cult-claim:hover {
  filter: brightness(1.15);
}

/* ================================================
   修炼弹窗紧凑布局 v2（一屏放下无滚动条）
   ================================================ */
/* 标题单行 */
.cultivation-header {
  padding: 7px 20px;
}
.cultivation-title-block {
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
}
.cultivation-title {
  font-size: 20px;
}
.cultivation-subtitle {
  margin-top: 0;
  font-size: 11px;
}

/* 主体压缩 */
.cultivation-body {
  min-height: 0;
}
.cultivation-left,
.cultivation-right {
  padding: 8px 10px;
  overflow-y: hidden;
}
.cultivation-center {
  padding: 10px 16px 6px;
  min-height: 0;
}

/* 面板标题紧凑 */
.cult-panel-title {
  font-size: 13px;
  margin-bottom: 6px;
  padding-bottom: 4px;
}

/* 左栏：境界阶梯紧凑 */
.realm-list {
  gap: 5px;
}
.realm-group-item {
  padding: 4px 8px;
}
.realm-group-name {
  font-size: 13px;
  margin-bottom: 3px;
}
.realm-dots {
  gap: 3px;
}
.realm-dot {
  width: 9px;
  height: 9px;
  border-width: 1px;
}

/* 左栏：本次修炼单行 */
.cult-stats-box {
  margin-top: 8px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.cult-stats-inline-label {
  font-size: 11px;
  color: #bf360c;
  font-weight: bold;
  white-space: nowrap;
}
.cult-stats-inline {
  font-size: 11px;
  color: #d0c0a0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cult-stat-mini-row {
  display: none;
}

/* 中栏：牌匾+称号 */
.cult-realm-plaque {
  padding: 3px 20px;
  margin-bottom: 5px;
}
.plaque-realm {
  font-size: 17px;
}
.plaque-stage {
  font-size: 13px;
}
.cult-realm-title-badge {
  font-size: 11px;
  padding: 1px 10px;
  margin-bottom: 3px;
}

/* 中栏：立绘区压缩 */
.cult-meditation-area {
  width: 150px;
  height: 150px;
  margin: 2px 0;
}
.cult-magic-circle {
  width: 132px;
  height: 132px;
}
.cult-meditation-img {
  width: 118px;
  height: 118px;
}
.cult-float-text {
  font-size: 15px;
}

/* 中栏：进度 */
.cult-progress-section {
  margin-top: 4px;
  max-width: 400px;
}
.cult-progress-label {
  margin-bottom: 3px;
  font-size: 12px;
}
.cult-progress-bar {
  height: 18px;
}

/* 中栏：按钮紧凑 */
.cult-action-buttons {
  margin-top: 8px;
  gap: 8px;
}
.cult-btn {
  padding: 7px 16px;
  font-size: 13px;
}
.cult-btn-large {
  padding: 8px 14px;
  font-size: 14px;
}
.cult-btn-full {
  padding: 8px 14px;
  font-size: 14px;
}
.cult-main-btn-row {
  margin-bottom: 6px;
}
.cult-auto-hint {
  margin-top: 6px;
  padding: 5px 12px;
  font-size: 12px;
}

/* 中栏：每日修炼紧凑 */
.daily-cult-box {
  margin-top: 6px;
  padding: 5px 8px;
}
.daily-cult-box .cult-panel-title {
  margin-bottom: 3px;
  font-size: 11px;
  text-align: left;
  border-bottom: none;
  padding-bottom: 0;
}
.daily-cult-row {
  gap: 6px;
  padding: 3px 0;
}
.daily-cult-name {
  font-size: 10px;
  margin-bottom: 2px;
}
.daily-cult-bar {
  height: 4px;
}
.daily-cult-reward {
  font-size: 9px;
}
.daily-cult-state {
  font-size: 9px;
}
.daily-cult-claim {
  padding: 2px 8px;
  font-size: 10px;
}

/* 中栏：突破结果+日志压缩 */
.cult-break-result {
  margin-top: 6px;
  padding: 4px 14px;
  font-size: 12px;
}
.cult-log-box {
  margin-top: 6px;
  padding: 5px 8px;
  max-height: 72px;
}
.cult-log-title {
  font-size: 11px;
  margin-bottom: 3px;
}
.cult-log-item {
  font-size: 10px;
}

/* 右栏：境界加成 2x2 网格 */
.cult-stats-panel {
  padding: 6px 8px;
  margin-bottom: 8px;
}
.cult-current-realm-label {
  font-size: 12px;
  margin-bottom: 4px;
  padding-bottom: 3px;
}
.cult-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
}
.cult-stat-cell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 2px 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cult-stat-cell:nth-child(odd) {
  border-right: 1px solid rgba(255,255,255,0.05);
  padding-right: 8px;
}
.cult-stat-label {
  color: #b0a090;
}
.cult-stat-value {
  color: #f0d68a;
  font-weight: bold;
}
.cult-stat-next {
  color: #81c784;
  font-size: 10px;
}

/* 右栏：突破条件 2x2 网格 */
.cult-break-condition {
  padding: 6px 8px;
}
.condition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 10px;
}
.condition-cell {
  display: flex;
  flex-direction: column;
  padding: 3px 0;
  font-size: 11px;
}
.condition-cell .condition-label {
  font-size: 10px;
  margin-bottom: 1px;
}
.condition-cell .condition-value {
  font-size: 12px;
  color: #d0c0a0;
}
.condition-cell .condition-value.met {
  color: #81c784;
  font-weight: bold;
}
.condition-row {
  display: none;
}
.talisman-toggle {
  padding: 2px 6px;
  font-size: 10px;
}
.condition-tip {
  margin-top: 5px;
  padding: 4px 6px;
  font-size: 10px;
  line-height: 1.4;
}

/* 右栏：修炼增益面板压缩 */
.cult-buff-panel {
  margin-top: 4px !important;
}
.cult-buff-panel .buff-block-title {
  font-size: 11px;
  margin-bottom: 4px;
}
.buff-loc-btn, .buff-pill-btn {
  padding: 3px 8px;
  font-size: 10px;
}
.buff-gain-breakdown {
  padding: 4px 8px;
  margin-top: 4px;
}
.buff-breakdown-row {
  font-size: 10px;
  padding: 1px 0;
}
.buff-breakdown-total {
  font-size: 11px;
  padding-top: 3px;
}

/* 修炼增益面板深度压缩 */
.cult-buff-panel {
  margin-top: 2px !important;
  padding: 4px 8px !important;
}
.cult-buff-panel .buff-block-title {
  font-size: 10px !important;
  margin-bottom: 3px !important;
  padding-top: 2px;
}
.buff-loc-row, .buff-pill-row {
  gap: 4px !important;
  margin-bottom: 3px !important;
}
.buff-loc-btn, .buff-pill-btn {
  padding: 2px 5px !important;
  font-size: 9px !important;
  border-radius: 4px !important;
}
.buff-gain-breakdown {
  padding: 3px 6px !important;
  margin-top: 3px !important;
}
.buff-breakdown-title {
  font-size: 10px !important;
  margin-bottom: 2px !important;
}
.buff-breakdown-row {
  font-size: 10px !important;
  padding: 1px 0 !important;
}
.buff-breakdown-total {
  font-size: 11px !important;
  padding-top: 2px !important;
}

/* 右栏最后微调（压 15px） */
.cultivation-right {
  padding: 5px 8px;
}
.cult-stats-panel {
  padding: 4px 6px;
  margin-bottom: 5px;
}
.cult-current-realm-label {
  margin-bottom: 2px;
  padding-bottom: 2px;
}
.cult-break-condition {
  padding: 4px 6px;
}
.condition-cell {
  padding: 1px 0;
}
.condition-tip {
  margin-top: 3px;
  padding: 2px 5px;
}
.cult-buff-panel {
  padding: 3px 6px !important;
}
.buff-gain-breakdown {
  padding: 2px 5px !important;
}

/* 属性格不换行 */
.cult-stat-cell {
  flex-wrap: nowrap;
}
.cult-stat-label {
  white-space: nowrap;
  font-size: 11px;
}
.cult-stat-value {
  white-space: nowrap;
  font-size: 11px;
}

/* ================================================
   修炼弹窗专业布局 v3（修复破格+视觉层级）
   ================================================ */

/* ---- 中栏：操作按钮强制横排 ---- */
.cultivation-center {
  padding: 10px 18px 8px;
}
.cult-action-buttons {
  width: 100%;
  margin-top: 8px;
  flex-direction: row;
  align-items: stretch;
}
.cult-main-btn-row {
  width: 100%;
  flex: 1;
  min-width: 0;
  gap: 8px;
  margin-bottom: 0;
  display: flex;
}
.cult-btn {
  white-space: nowrap;
  min-width: 0;
}
.cult-btn-large {
  flex: 1.4;
  min-width: 0;
  padding: 8px 10px;
  font-size: 13px;
}
.cult-btn-auto {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-size: 12px;
  white-space: nowrap;
}
.cult-btn-full {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-size: 13px;
  white-space: nowrap;
}

/* ---- 右栏：网格防溢出 ---- */
.condition-grid {
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
}
.condition-cell {
  min-width: 0;
  overflow: hidden;
}
.condition-cell .condition-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cult-stats-grid {
  gap: 2px 6px;
}
.cult-stat-cell {
  min-width: 0;
  overflow: hidden;
}

/* ---- 右栏：地点/丹药按钮行不换行不裁切 ---- */
.buff-loc-row, .buff-pill-row {
  flex-wrap: nowrap !important;
  display: flex;
}
.buff-loc-btn, .buff-pill-btn {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 4px !important;
  font-size: 9px !important;
}

/* ---- 左栏：境界圆点栅格 ---- */
.realm-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 5px 8px;
}
.realm-group-name {
  margin-bottom: 0;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.realm-dots {
  gap: 2px;
  flex-wrap: nowrap;
}
.realm-dot {
  width: 7px;
  height: 7px;
  border-width: 1px;
}

/* ---- 中栏：立绘区加大（视觉焦点） ---- */
.cult-meditation-area {
  width: 168px;
  height: 168px;
  margin: 3px 0;
}
.cult-magic-circle {
  width: 150px;
  height: 150px;
}
.cult-meditation-img {
  width: 132px;
  height: 132px;
}

/* ---- 每日修炼行：严格对齐 ---- */
.daily-cult-box {
  width: 100%;
  box-sizing: border-box;
}
.daily-cult-row {
  width: 100%;
  box-sizing: border-box;
}
.daily-cult-info {
  flex: 1;
  min-width: 0;
}
.daily-cult-reward {
  flex-shrink: 0;
}
.daily-cult-claim, .daily-cult-state {
  flex-shrink: 0;
}

/* ---- 标题条更专业 ---- */
.cultivation-header {
  padding: 8px 18px;
}
.cultivation-title {
  font-size: 19px;
}
.cultivation-subtitle {
  font-size: 11px;
  color: #a89070;
}
.cult-currency-item {
  font-size: 12px;
  padding: 3px 8px;
}

/* ---- 统一面板间距节奏 ---- */
.cultivation-left, .cultivation-right {
  padding: 8px 10px;
}
.cult-stats-panel, .cult-break-condition {
  padding: 6px 8px;
}
.cult-panel-title {
  margin-bottom: 5px;
  padding-bottom: 4px;
}

.buff-loc-btn, .buff-pill-btn {
  padding: 3px 2px !important;
  letter-spacing: 0;
}
.buff-loc-row, .buff-pill-row {
  gap: 3px !important;
}
.buff-loc-btn, .buff-pill-btn {
  padding: 3px 1px !important;
}
.buff-pill-row {
  gap: 2px !important;
}

/* ===== 在线玩家卡片 v2（三段式专业布局）===== */
.online-player-card-v2 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  margin-bottom: 6px;
  background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(250,245,235,0.75));
  border: 1px solid rgba(139, 115, 85, 0.25);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.online-player-card-v2:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: #c9a96e;
  box-shadow: 0 2px 10px rgba(201, 169, 110, 0.3);
  transform: translateY(-1px);
}
.online-player-card-v2.self {
  border: 1.5px solid #c9a96e;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.16), rgba(201, 169, 110, 0.05));
  box-shadow: 0 0 8px rgba(201, 169, 110, 0.3);
}
.op-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.op-card-head .avatar-container {
  flex-shrink: 0;
}
.op-card-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: #3a2a1a;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-card-level {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: "STKaiti", "KaiTi", serif;
  letter-spacing: 0.5px;
}
.op-card-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 0;
}
.op-card-sect {
  flex-shrink: 0;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 1px;
  font-weight: 600;
}
.op-card-realm {
  font-size: 10px;
  font-weight: 600;
  color: #5c4a33;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-card-hp {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 0;
}
.op-card-hp-bar {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  overflow: hidden;
}
.op-card-hp-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #e74c3c, #e67e22);
  transition: width 0.3s ease;
}
.op-card-hp-text {
  flex-shrink: 0;
  font-size: 9px;
  color: #5c4a33;
  font-family: "STKaiti", "KaiTi", serif;
  width: 30px;
  text-align: right;
}

/* ===== 在线玩家卡片 v3（信息密度提升 + 操作栏）===== */
.op-card-title {
  flex-shrink: 0;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(201, 169, 110, 0.32);
  color: #6b4f20;
  border: 1px solid rgba(160, 130, 70, 0.75);
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.op-card-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
  font-size: 9px;
}
.op-card-stat {
  color: #4a3520;
  font-weight: 600;
  font-family: "STKaiti", "KaiTi", serif;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.op-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.op-card-action {
  flex: 1;
  min-width: 0;
  font-size: 9px;
  padding: 3px 0;
  border-radius: 4px;
  border: 1px solid rgba(139, 115, 85, 0.35);
  background: rgba(255, 255, 255, 0.6);
  color: #6b4f33;
  cursor: pointer;
  font-family: "STKaiti", "KaiTi", serif;
  letter-spacing: 0.5px;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-align: center;
}
.op-card-action:hover {
  background: #c9a96e;
  color: #fff;
  border-color: #c9a96e;
}
.op-card-action:active {
  transform: scale(0.96);
}

/* ===== 切磋邀请弹窗 ===== */
.challenge-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(20, 12, 4, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20000;
}
.challenge-modal {
  width: 320px;
  background: linear-gradient(160deg, #3a2a1a, #2a1c10);
  border: 2px solid #c9a96e;
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  text-align: center;
}
.challenge-modal-title {
  font-size: 18px;
  font-weight: bold;
  color: #ffd700;
  letter-spacing: 2px;
  margin-bottom: 12px;
  font-family: "STKaiti", "KaiTi", serif;
}
.challenge-modal-text {
  font-size: 14px;
  color: #e8d5b0;
  line-height: 1.7;
  margin-bottom: 18px;
  font-family: "STKaiti", "KaiTi", serif;
}
.challenge-modal-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.challenge-modal-btn {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  font-family: "STKaiti", "KaiTi", serif;
  letter-spacing: 1px;
  transition: all 0.15s ease;
}
.challenge-modal-btn.accept {
  background: linear-gradient(135deg, #c9a96e, #b08a4a);
  color: #2a1c10;
  font-weight: bold;
}
.challenge-modal-btn.accept:hover { filter: brightness(1.12); }
.challenge-modal-btn.refuse {
  background: rgba(255, 255, 255, 0.12);
  color: #cbb493;
  border: 1px solid rgba(203, 180, 147, 0.4);
}
.challenge-modal-btn.refuse:hover { background: rgba(255, 255, 255, 0.2); }

/* ===== 切磋结果弹窗 ===== */
.pvp-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(20, 12, 4, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20001;
}
.pvp-modal {
  width: 420px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #3a2a1a, #241708);
  border: 2px solid #c9a96e;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}
.pvp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(201, 169, 110, 0.15);
  border-bottom: 1px solid rgba(201, 169, 110, 0.3);
}
.pvp-modal-title {
  font-size: 17px;
  font-weight: bold;
  color: #ffd700;
  letter-spacing: 2px;
  font-family: "STKaiti", "KaiTi", serif;
}
.pvp-modal-close {
  background: none;
  border: none;
  color: #cbb493;
  font-size: 16px;
  cursor: pointer;
}
.pvp-modal-close:hover { color: #fff; }
.pvp-modal-body {
  padding: 16px;
  overflow-y: auto;
}
.pvp-arena {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}
.pvp-side {
  flex: 1;
  text-align: center;
}
.pvp-avatar { margin-bottom: 6px; }
.pvp-name {
  font-size: 14px;
  font-weight: bold;
  color: #f0e0c0;
  font-family: "STKaiti", "KaiTi", serif;
}
.pvp-level {
  font-size: 11px;
  color: #b8a184;
  margin: 2px 0 6px;
}
.pvp-hp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(231, 76, 60, 0.15);
  border: 1px solid rgba(231, 76, 60, 0.35);
  border-radius: 4px;
  padding: 2px 8px;
}
.pvp-hp-label { font-size: 10px; color: #e8846a; }
.pvp-hp-num { font-size: 12px; color: #ffb3a0; font-weight: bold; }
.pvp-hp-num.dead { color: #e74c3c; text-decoration: line-through; }
.pvp-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  font-size: 20px;
  font-weight: bold;
  color: #ffd700;
  font-family: "STKaiti", "KaiTi", serif;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}
.pvp-result {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  padding: 8px;
  border-radius: 6px;
  margin-bottom: 8px;
  font-family: "STKaiti", "KaiTi", serif;
  letter-spacing: 1px;
}
.pvp-result.win { background: rgba(76, 175, 80, 0.18); color: #7ed68a; border: 1px solid rgba(76, 175, 80, 0.4); }
.pvp-result.lose { background: rgba(231, 76, 60, 0.15); color: #e8846a; border: 1px solid rgba(231, 76, 60, 0.35); }
.pvp-result.draw { background: rgba(255, 215, 0, 0.12); color: #ffd700; border: 1px solid rgba(255, 215, 0, 0.35); }
.pvp-reward {
  text-align: center;
  font-size: 13px;
  color: #ffd700;
  background: rgba(201, 169, 110, 0.15);
  border-radius: 6px;
  padding: 6px;
  margin-bottom: 10px;
  font-family: "STKaiti", "KaiTi", serif;
}
.pvp-logs {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 10px 12px;
  max-height: 180px;
  overflow-y: auto;
}
.pvp-logs-title {
  font-size: 12px;
  color: #b8a184;
  margin-bottom: 6px;
  font-family: "STKaiti", "KaiTi", serif;
  letter-spacing: 1px;
}
.pvp-log {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #d8c8a8;
  line-height: 1.7;
}
.pvp-log-round {
  flex-shrink: 0;
  color: #8f7a5c;
  font-size: 11px;
}
.pvp-log-empty {
  font-size: 12px;
  color: #8f7a5c;
  text-align: center;
  padding: 6px;
}
.pvp-modal-btn {
  margin: 0 16px 16px;
  padding: 10px 0;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #c9a96e, #b08a4a);
  color: #2a1c10;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  font-family: "STKaiti", "KaiTi", serif;
  letter-spacing: 2px;
  transition: all 0.15s ease;
}
.pvp-modal-btn:hover { filter: brightness(1.12); }

/* ===== Skill management (learn/equip/slots) ===== */
.skill-action-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.skill-learn-btn,
.skill-equip-btn,
.skill-unequip-btn {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid;
}

.skill-learn-btn {
  background: linear-gradient(180deg, #059669, #047857);
  border-color: #34d399;
  box-shadow: 0 0 12px rgba(5,150,105,0.4);
}

.skill-learn-btn:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(5,150,105,0.7);
}

.skill-learn-btn.disabled {
  background: #444;
  border-color: #666;
  color: #888;
  cursor: not-allowed;
  box-shadow: none;
}

.skill-equip-btn {
  background: linear-gradient(180deg, #d97706, #b45309);
  border-color: #fbbf24;
  box-shadow: 0 0 12px rgba(217,119,6,0.4);
}

.skill-equip-btn:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(217,119,6,0.7);
}

.skill-equip-btn.disabled {
  background: #444;
  border-color: #666;
  color: #888;
  cursor: not-allowed;
  box-shadow: none;
}

.skill-unequip-btn {
  padding: 6px 14px;
  background: linear-gradient(180deg, #4b5563, #374151);
  border-color: #9ca3af;
  font-size: 12px;
}

.skill-unequip-btn:hover:not(.disabled) {
  background: linear-gradient(180deg, #dc2626, #991b1b);
  border-color: #f87171;
}

.skill-equipped-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(52,211,153,0.15);
  border: 1px solid rgba(52,211,153,0.5);
  border-radius: 8px;
}

.equipped-flag {
  color: #34d399;
  font-weight: bold;
  font-size: 13px;
}

.skill-slot-picker {
  padding: 8px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(167,139,250,0.4);
  border-radius: 8px;
}

.slot-picker-title {
  font-size: 12px;
  color: #c4b5fd;
  margin-bottom: 6px;
}

.slot-picker-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.slot-picker-btn {
  padding: 5px;
  border-radius: 6px;
  background: rgba(124,58,237,0.25);
  border: 1px solid #7c3aed;
  color: #e9d5ff;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.slot-picker-btn:hover {
  background: rgba(124,58,237,0.5);
  color: #fff;
}

/* 底部已装备槽位栏 */
.skill-equip-bar {
  padding: 10px 20px;
  background: rgba(0,0,0,0.45);
  border-top: 2px solid rgba(124,58,237,0.4);
}

.equip-bar-title {
  font-size: 13px;
  color: #a78bfa;
  font-weight: bold;
  margin-bottom: 8px;
}

.skill-slot-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.skill-slot-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 42px;
}

.skill-slot-item.filled {
  background: rgba(217,119,6,0.2);
  border: 1px solid rgba(251,191,36,0.6);
}

.skill-slot-item.filled:hover {
  background: rgba(217,119,6,0.35);
  transform: translateY(-2px);
}

.skill-slot-item.empty {
  background: rgba(0,0,0,0.3);
  border: 1px dashed rgba(107,114,128,0.6);
  cursor: default;
}

.skill-slot-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1a140d;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.skill-slot-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.skill-slot-name {
  font-size: 12px;
  color: #fde68a;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skill-slot-lv {
  font-size: 10px;
  color: #fbbf24;
}

.skill-slot-empty-text {
  font-size: 11px;
  color: #6b7280;
}

/* ===== 坐骑/宠物 立绘展示版布局（覆盖三栏旧版） ===== */

/* 主体：左立绘 + 右功能 */
.mount-body,
.pet-body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  overflow: hidden;
  padding: 12px;
  gap: 12px;
}

/* ---- 左侧大立绘区 ---- */
.mount-portrait-area,
.pet-portrait-area {
  width: 300px;
  min-width: 300px;
  background: linear-gradient(180deg, rgba(20, 15, 10, 0.85) 0%, rgba(15, 10, 8, 0.95) 100%);
  border: 1px solid rgba(201, 169, 110, 0.25);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 14px;
  gap: 8px;
  overflow: hidden;
  position: relative;
}

.mount-portrait-frame,
.pet-portrait-frame {
  width: 240px;
  height: 240px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, #f7f2e6 50%, #efe6d2 100%);
  border: 2px solid #555;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mount-portrait-frame.quality-common { border-color: #9e9e9e; }
.mount-portrait-frame.quality-rare { border-color: #4caf50; }
.mount-portrait-frame.quality-epic { border-color: #2196f3; }
.mount-portrait-frame.quality-legendary { border-color: #ff9800; }
.mount-portrait-frame.quality-myth { border-color: #e91e63; }
.pet-portrait-frame.quality-common { border-color: #9e9e9e; }
.pet-portrait-frame.quality-rare { border-color: #4caf50; }
.pet-portrait-frame.quality-epic { border-color: #2196f3; }
.pet-portrait-frame.quality-legendary { border-color: #ff9800; }
.pet-portrait-frame.quality-myth { border-color: #e91e63; }

.mount-portrait-glow,
.pet-portrait-glow {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 10px;
  pointer-events: none;
  z-index: 1;
}

.mount-portrait-img,
.pet-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  z-index: 0;
}

.mount-portrait-badge,
.pet-portrait-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(201, 169, 110, 0.5);
  color: #f0d9a8;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  z-index: 2;
  letter-spacing: 1px;
}

.mount-portrait-name,
.pet-portrait-name {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.mount-portrait-quality-tag,
.pet-portrait-quality-tag {
  font-size: 12px;
  border: 1px solid;
  padding: 2px 14px;
  border-radius: 20px;
  letter-spacing: 2px;
  background: rgba(0, 0, 0, 0.4);
}

.mount-portrait-level,
.pet-portrait-level {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 20px;
  padding: 5px 10px;
}

.mount-portrait-level-num,
.pet-portrait-level-num {
  font-size: 13px;
  font-weight: bold;
  color: #87ceeb;
  white-space: nowrap;
}

.mount-portrait-level-bar,
.pet-portrait-level-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  overflow: hidden;
}

.mount-portrait-level-fill,
.pet-portrait-level-fill {
  height: 100%;
  background: linear-gradient(90deg, #87ceeb, #f0d9a8);
  border-radius: 3px;
}

.mount-portrait-level-max,
.pet-portrait-level-max {
  font-size: 11px;
  color: #a08060;
  white-space: nowrap;
}

.mount-portrait-empty,
.pet-portrait-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #6b5d4f;
}

.mount-portrait-empty-icon { font-size: 60px; opacity: 0.5; }
.pet-portrait-empty-icon { font-size: 60px; opacity: 0.5; }
.mount-portrait-empty-text { font-size: 14px; }
.pet-portrait-empty-text { font-size: 14px; }

/* ---- 右侧功能区 ---- */
.mount-right-area,
.pet-right-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 品质筛选横条 */
.mount-filter-bar,
.pet-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: rgba(20, 15, 10, 0.6);
  border: 1px solid rgba(69, 90, 100, 0.2);
  border-radius: 8px;
  padding: 6px 8px;
}

.mount-filter-item,
.pet-filter-item {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 169, 110, 0.25);
  border-radius: 20px;
  color: #b8a88a;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.mount-filter-item:hover,
.pet-filter-item:hover {
  color: #f0d9a8;
  background: rgba(201, 169, 110, 0.15);
}

.mount-filter-item.active,
.pet-filter-item.active {
  color: #1a1510;
  background: linear-gradient(135deg, #f0d9a8, #c9a96e);
  border-color: #f0d9a8;
  font-weight: bold;
}

/* 网格区（滚动） */
.mount-grid-area,
.pet-grid-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: rgba(20, 15, 10, 0.5);
  border: 1px solid rgba(69, 90, 100, 0.2);
  border-radius: 8px;
  padding: 10px;
}

.mount-grid,
.pet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mount-item-icon,
.pet-item-icon {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.mount-item-icon img,
.pet-item-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* 详情面板（右侧底部横条） */
.mount-detail-panel,
.pet-detail-panel {
  width: auto;
  flex: none;
  background: linear-gradient(180deg, rgba(40, 30, 20, 0.92) 0%, rgba(25, 18, 12, 0.96) 100%);
  border: 1px solid rgba(201, 169, 110, 0.4);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: visible;
}

.mount-detail-head,
.pet-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mount-detail-title,
.pet-detail-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.mount-detail-title h3,
.pet-detail-title h3 {
  margin: 0;
  font-size: 16px;
}

.mount-detail-quality-text,
.pet-detail-quality-text {
  font-size: 12px;
}

.mount-detail-desc,
.pet-detail-desc {
  flex: 1;
  font-size: 12px;
  color: #b8a88a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mount-detail-stats,
.pet-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.mount-detail-stat-row,
.pet-detail-stat-row {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(69, 90, 100, 0.2);
  padding: 5px 8px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.mount-stat-label,
.pet-stat-label {
  color: #a08060;
}

.mount-stat-value,
.pet-stat-value {
  color: #f0d9a8;
  font-weight: bold;
}

.mount-detail-actions,
.pet-detail-actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.mount-action-btn,
.pet-action-btn {
  flex: 1;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  transition: all 0.2s;
  color: #1a1510;
}

.mount-action-btn.buy,
.pet-action-btn.buy {
  background: linear-gradient(135deg, #f0d9a8, #c9a96e);
}

.mount-action-btn.equip,
.pet-action-btn.equip {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
}

.mount-action-btn.equipped,
.pet-action-btn.equipped {
  background: rgba(76, 175, 80, 0.2);
  color: #81c784;
  cursor: default;
}

.mount-action-btn.upgrade,
.pet-action-btn.upgrade {
  background: linear-gradient(135deg, #42a5f5, #1565c0);
  color: #fff;
}

.mount-action-btn.buy.disabled,
.pet-action-btn.buy.disabled {
  background: rgba(255, 255, 255, 0.08);
  color: #6b5d4f;
  cursor: not-allowed;
}

/* 侧栏物品小图兼容旧网格 */
.mount-item .mount-item-icon img,
.pet-item .pet-item-icon img {
  width: auto;
  height: 56px;
}

/* 属性加成小标签（左侧人物面板） */
.attr-bonus {
  font-style: normal;
  font-size: 11px;
  color: #4caf50;
  font-weight: bold;
  margin-left: 4px;
}

/* 弹窗背景图区域覆盖旧引用 */
.mount-modal-bg,
.pet-modal-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, #3a2a18 0%, #1a1510 60%, #0d0a08 100%);
  z-index: 0;
}


/* ===== 锻造铺 · 升星系统样式（强化/升星双Tab）===== */
.forge-tabs {
    display: flex;
    gap: 8px;
    padding: 10px 18px 0;
}
.forge-tab {
    padding: 8px 22px;
    border-radius: 8px 8px 0 0;
    background: #2a2f3a;
    color: #b8c0cc;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid #3a4157;
    border-bottom: none;
    transition: all 0.2s;
    user-select: none;
}
.forge-tab:hover { color: #ffd76a; }
.forge-tab.active {
    background: linear-gradient(180deg, #4a3b22, #2f2a1a);
    color: #ffd76a;
    border-color: #8a6d2a;
    box-shadow: 0 -2px 10px rgba(255, 215, 106, 0.15);
}
.forge-header-info { display: flex; align-items: center; gap: 12px; }
.forge-gold-display {
    font-size: 14px;
    font-weight: bold;
    color: #ffd76a;
    text-shadow: 0 0 8px rgba(255, 215, 106, 0.4);
}
.forge-star-history {
    font-size: 12px;
    color: #ff9d7e;
    background: rgba(255, 120, 60, 0.12);
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 157, 126, 0.4);
}
.forge-luck-bar {
    display: inline-block;
    width: 90px;
    height: 10px;
    background: #232838;
    border-radius: 5px;
    overflow: hidden;
    vertical-align: middle;
    border: 1px solid #3a4157;
}
.forge-luck-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #7b2ff7, #ffd700);
    transition: width 0.4s;
    border-radius: 5px;
}
.forge-luck-num {
    margin-left: 8px;
    font-size: 12px;
    color: #c9a7ff;
    vertical-align: middle;
}
.forge-set-panel {
    margin-top: 8px;
    padding: 7px 12px;
    background: linear-gradient(135deg, rgba(123, 47, 247, 0.12), rgba(255, 215, 106, 0.08));
    border: 1px solid rgba(201, 167, 255, 0.35);
    border-radius: 8px;
}
.forge-set-title {
    font-size: 12px;
    font-weight: bold;
    color: #c9a7ff;
    margin-bottom: 4px;
}
.forge-set-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.forge-set-name {
    font-size: 14px;
    font-weight: bold;
    color: #ffd76a;
    text-shadow: 0 0 8px rgba(255, 215, 106, 0.5);
    white-space: nowrap;
}
.forge-set-desc {
    font-size: 12px;
    color: #cfc8de;
}
.forge-set-next {
    margin-top: 3px;
    font-size: 11px;
    color: #9aa3b5;
}

/* 装备栏星级角标 */
.equip-star-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 11px;
    font-weight: bold;
    background: rgba(0,0,0,0.75);
    border: 1px solid currentColor;
    border-radius: 8px;
    padding: 0 4px;
    text-shadow: 0 0 6px currentColor;
    z-index: 2;
    pointer-events: none;
}


/* ===== 锻造铺 · 宝石系统样式 ===== */
.forge-gem-wrap { width: 100%; height: 100%; display: flex; flex-direction: column; }
.forge-gem-tabs { display: flex; gap: 8px; padding: 2px 0 10px; }
.forge-gem-tab {
  padding: 6px 18px;
  border-radius: 6px;
  background: #232838;
  color: #9aa3b5;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #3a4157;
  user-select: none;
}
.forge-gem-tab:hover { color: #ffd76a; }
.forge-gem-tab.active {
  background: linear-gradient(180deg, #3a2b52, #2a1f3a);
  color: #c9a7ff;
  border-color: #7b5fb5;
}
.forge-gem-msg {
  margin: 0 0 10px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(123, 47, 247, 0.15);
  color: #c9a7ff;
  font-size: 12px;
  text-align: center;
}
.forge-gem-layout { display: flex; flex: 1; min-height: 0; gap: 14px; }
.forge-gem-left {
  width: 150px;
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  padding: 12px;
  overflow-y: auto;
}
.gem-slot-grid { display: flex; flex-direction: column; gap: 6px; }
.gem-slot-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  user-select: none;
}
.gem-slot-item.selected { border-color: #ffd76a; background: rgba(255, 215, 106, 0.12); }
.gem-slot-sockets {
  margin-left: auto;
  font-size: 11px;
  color: #8fb7ff;
  background: rgba(80, 140, 255, 0.15);
  padding: 1px 6px;
  border-radius: 8px;
}
.forge-gem-center {
  flex: 1;
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gem-sockets-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  flex: 1;
  align-content: start;
}
.gem-socket {
  border-radius: 8px;
  min-height: 92px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255,255,255,0.2);
}
.gem-socket.filled {
  border: 1px solid rgba(201, 167, 255, 0.5);
  background: linear-gradient(135deg, rgba(123,47,247,0.12), rgba(80,140,255,0.08));
}
.gem-socket.empty { background: rgba(0,0,0,0.2); }
.gem-socket-inner { text-align: center; }
.gem-socket-icon { font-size: 26px; display: block; }
.gem-socket-name { display: block; font-size: 12px; font-weight: bold; margin: 4px 0 2px; }
.gem-socket-val { display: block; font-size: 12px; color: #7bed9f; }
.gem-socket-remove {
  margin-top: 6px;
  padding: 3px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 99, 99, 0.5);
  background: rgba(255, 99, 99, 0.12);
  color: #ff6b6b;
  font-size: 11px;
  cursor: pointer;
}
.gem-socket-empty { text-align: center; color: #5a6478; }
.gem-socket-empty-icon { font-size: 26px; display: block; }
.gem-socket-empty-text { font-size: 11px; }
.gem-allow-tip {
  font-size: 11px;
  color: #8fb7ff;
  padding: 6px 10px;
  background: rgba(80,140,255,0.08);
  border-radius: 6px;
}
.forge-gem-right {
  width: 250px;
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  padding: 12px;
  overflow-y: auto;
}
.gem-bag-list { display: flex; flex-direction: column; gap: 6px; }
.gem-bag-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.gem-bag-icon { font-size: 18px; }
.gem-bag-name { flex: 1; font-size: 12px; font-weight: bold; }
.gem-bag-count { font-size: 12px; color: #9aa3b5; }
.gem-bag-btn {
  padding: 3px 12px;
  border-radius: 10px;
  border: 1px solid rgba(123, 47, 247, 0.6);
  background: rgba(123, 47, 247, 0.18);
  color: #c9a7ff;
  font-size: 11px;
  cursor: pointer;
}
.gem-bag-btn.disabled { opacity: 0.4; cursor: not-allowed; }
.forge-gem-combine { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 4px; }
.forge-combine-tip {
  padding: 8px 12px;
  margin-bottom: 12px;
  border-radius: 6px;
  background: rgba(255, 215, 106, 0.08);
  border: 1px solid rgba(255, 215, 106, 0.25);
  color: #ffd76a;
  font-size: 12px;
}
.forge-combine-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.forge-combine-card {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px;
}
.forge-combine-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.forge-combine-icon { font-size: 20px; }
.forge-combine-name { font-size: 14px; font-weight: bold; }
.forge-combine-attr { margin-left: auto; font-size: 11px; color: #7bed9f; }
.forge-combine-empty { color: #5a6478; font-size: 12px; text-align: center; padding: 10px 0; }
.forge-combine-rows { display: flex; flex-direction: column; gap: 4px; }
.forge-combine-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  border-radius: 5px;
  background: rgba(255,255,255,0.04);
}
.forge-combine-lv { font-size: 12px; font-weight: bold; flex: 1; }
.forge-combine-count { font-size: 12px; color: #9aa3b5; }
.forge-combine-btn {
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 215, 106, 0.6);
  background: rgba(255, 215, 106, 0.15);
  color: #ffd76a;
  font-size: 10px;
  cursor: pointer;
}

/* 装备图片尺寸限制（防撑爆弹窗） */
.forge-equip-img {
  max-width: 116px;
  max-height: 126px;
  width: auto;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 3;
}
.forge-equip-display {
  max-width: 100%;
  overflow: hidden;
}
/* 左侧装备槽小图标 */
.forge-slot-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}
.gem-slot-item .forge-slot-img {
  width: 34px;
  height: 34px;
}

/* ===== 锻造铺真实物品图标 ===== */
.forge-item-icon {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    vertical-align: -4px;
    margin: 0 2px;
    box-shadow: 0 0 4px rgba(255, 215, 106, 0.35);
}
.gem-socket-icon-img {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: block;
    margin: 0 auto 2px;
    box-shadow: 0 0 6px rgba(255, 215, 106, 0.35);
}
.gem-bag-icon-img {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    flex: 0 0 auto;
    box-shadow: 0 0 4px rgba(255, 215, 106, 0.3);
}
.forge-combine-icon-img {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(255, 215, 106, 0.3);
}

/* ===== 个人信息-装备强化/星级角标 ===== */
.pi-equip-badges {
    position: absolute;
    top: -6px;
    right: -6px;
    display: flex;
    gap: 2px;
    z-index: 2;
}
.pi-equip-badge {
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 3px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.pi-equip-badge-enhance {
    background: linear-gradient(135deg, #e8962a, #b85c0f);
}
.pi-equip-badge-star {
    background: linear-gradient(135deg, #8b6cff, #4a2fd6);
}
.pi-equip-detail-extra {
    border-top: 1px dashed rgba(255,255,255,0.18);
    margin-top: 2px;
    padding-top: 2px;
}


/* ===== 地图分类布局（v98） ===== */
.map-modal-cat {
  width: 1040px;
  max-width: 96vw;
}
.map-cat-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 10px;
  padding: 10px;
}
/* 左侧分类导航 */
.map-cat-nav {
  width: 170px;
  flex-shrink: 0;
  background: rgba(38, 50, 56, 0.85);
  border: 1px solid #8b4513;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}
.map-cat-nav-title {
  color: #f5e6c8;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(245, 230, 200, 0.25);
  margin-bottom: 2px;
}
.map-cat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: #dcc690;
  border: 1px solid transparent;
  transition: all 0.15s;
  position: relative;
}
.map-cat-item:hover {
  background: rgba(220, 198, 144, 0.12);
}
.map-cat-item.active {
  background: linear-gradient(90deg, rgba(139, 69, 19, 0.7), rgba(139, 69, 19, 0.25));
  border-color: #b87333;
  color: #fff;
  font-weight: bold;
}
.map-cat-item.current .map-cat-icon {
  box-shadow: 0 0 0 2px #ffd700;
  border-radius: 6px;
}
.map-cat-icon {
  font-size: 20px;
}
.map-cat-name {
  flex: 1;
  font-size: 13px;
}
.map-cat-count {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  padding: 1px 7px;
  font-size: 11px;
  color: #f5e6c8;
}
.map-cat-you {
  position: absolute;
  right: 6px;
  bottom: 1px;
  font-size: 9px;
  color: #ffd700;
}
.map-cat-tip {
  margin-top: auto;
  padding: 8px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  font-size: 12px;
  color: #f5e6c8;
  line-height: 1.6;
  text-align: center;
}
/* 中间地图网格 */
.map-cat-grid-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: rgba(38, 50, 56, 0.6);
  border: 1px solid #8b4513;
  border-radius: 10px;
  padding: 8px;
  overflow-y: auto;
}
.map-cat-grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px 8px;
  border-bottom: 1px solid rgba(220, 198, 144, 0.3);
  margin-bottom: 8px;
}
.map-cat-grid-title {
  font-size: 16px;
  font-weight: bold;
  color: #f5e6c8;
}
.map-cat-grid-sub {
  font-size: 12px;
  color: #dcc690;
}
.map-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.map-card {
  position: relative;
  height: 124px;
  background-size: cover !important;
  background-position: center !important;
  border: 1px solid #8b4513;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  overflow: hidden;
}
.map-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.map-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  border-color: #d4a06a;
}
.map-card.current {
  border-color: #ffd700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.15), rgba(38, 50, 56, 0.7));
}
.map-card.available {
  border-color: #4caf50;
}
.map-card.locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.map-card.far {
  opacity: 0.75;
}
.map-img-card-shade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
  pointer-events: none;
}
.map-img-card-badge {
  position: absolute;
  top: 5px; left: 5px;
  font-size: 11px;
  font-weight: bold;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.68);
  color: #fff;
  z-index: 2;
  pointer-events: none;
}
.map-img-card-badge.cur { color: #ffe066; border: 1px solid #ffd700; }
.map-img-card-badge.ok { color: #8cffa0; }
.map-img-card-badge.lock { color: #ffb3b3; }
.map-img-card-badge.far { color: #d5d5d5; }
.map-img-card-info {
  position: absolute;
  left: 8px; right: 8px; bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  z-index: 2;
  pointer-events: none;
}
.map-img-card-name {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.6);
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-img-card-lv {
  color: #ffd700;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}
.map-img-card-conn {
  position: absolute;
  left: 8px; right: 8px; bottom: 3px;
  display: flex;
  gap: 5px;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}
.map-img-card-conn-tag {
  font-size: 10px;
  color: #cde8ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}


/* ===== 地图图片布局 + 名称标注（v100） ===== */
.map-img-area {
  position: relative;
  flex: 1;
  min-height: 0;
  background-size: cover;
  background-position: center;
  border: 1px solid #8b4513;
  border-radius: 8px;
  overflow: hidden;
}
.map-img-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(10, 14, 20, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 7px;
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  transition: all 0.15s;
  z-index: 2;
}
.map-img-label:hover {
  transform: translate(-50%, -50%) scale(1.08);
  border-color: #ffd700;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  z-index: 5;
}
.map-img-label-name {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.6);
  letter-spacing: 1px;
}
.map-img-label-lv {
  color: #ffd700;
  font-size: 11px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.map-img-label.current {
  border-color: #ffd700;
  background: rgba(90, 60, 0, 0.75);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.55);
}
.map-img-label.current .map-img-label-name {
  color: #ffe066;
}
.map-img-label.available {
  border-color: rgba(76, 175, 80, 0.9);
}
.map-img-label.available::before {
  content: '●';
  color: #4caf50;
  font-size: 10px;
  text-shadow: 0 0 3px #000;
}
.map-img-label.locked {
  opacity: 0.88;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(10, 14, 20, 0.5);
  cursor: not-allowed;
}
.map-img-label.locked .map-img-label-name {
  color: #cfd4da;
}
.map-img-label.locked::after {
  content: '🔒';
  font-size: 10px;
}
.map-img-label.far {
  opacity: 0.78;
  border-style: dashed;
}
.map-img-label.far .map-img-label-name {
  color: #e8e0d0;
}
.map-img-legend {
  display: flex;
  gap: 14px;
  justify-content: center;
  padding: 7px 0 2px;
  font-size: 12px;
  color: #dcc690;
  flex-wrap: wrap;
}
.map-img-legend .lg.cur { color: #ffd700; }
.map-img-legend .lg.ok { color: #4caf50; }
.map-img-legend .lg.lock { color: #ff6b6b; }
.map-img-legend .lg.far { color: #bbb; }


/* ===== 相邻线路 SVG（v101） ===== */
.map-img-lines {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.map-img-line {
  stroke: rgba(255, 215, 0, 0.45);
  stroke-width: 0.7;
  stroke-dasharray: 2.2, 1.6;
  vector-effect: non-scaling-stroke;
}
.map-img-line:hover {
  stroke: #ffd700;
  stroke-width: 1.2;
}


/* ===== 地图专属图卡片状态（v102） ===== */
.map-card.current {
  border-color: #ffd700 !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
}
.map-card.available { border-color: #4caf50 !important; }
.map-card.locked {
  opacity: 0.75;
  cursor: not-allowed;
}
.map-card.far {
  border-style: dashed;
  opacity: 0.85;
}
.map-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  border-color: #d4a06a;
}


/* ===== 装备图鉴弹窗（v118） ===== */
.atlas-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.atlas-modal { width: 860px; max-width: 94vw; max-height: 88vh; background: linear-gradient(160deg, #2b2118, #1a1410); border: 2px solid #8a6a3f; border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 0 40px rgba(0,0,0,0.6); color: #e8dcc8; font-size: 13px; }
.atlas-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: linear-gradient(90deg, #3a2c1a, #241a10); border-bottom: 1px solid #8a6a3f; }
.atlas-title { font-size: 18px; font-weight: 700; color: #f0d48a; letter-spacing: 2px; }
.atlas-subtitle { flex: 1; font-size: 12px; color: #a8987c; }
.atlas-close { background: #5a3d22; color: #f5e6c8; border: 1px solid #8a6a3f; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: 14px; line-height: 1; }
.atlas-close:hover { background: #7a5530; }
.atlas-filters { padding: 10px 18px; display: flex; flex-direction: column; gap: 8px; background: rgba(0,0,0,0.25); border-bottom: 1px solid #5a4428; }
.atlas-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.atlas-filter-label { color: #b8a888; width: 48px; flex-shrink: 0; }
.atlas-filter-btn { background: #2c2116; color: #d8c8a8; border: 1px solid #6a5430; border-radius: 5px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.atlas-filter-btn:hover { border-color: #c8a860; }
.atlas-filter-btn.active { background: #6a4a20; color: #ffe8b0; border-color: #d4a84a; box-shadow: 0 0 6px rgba(212,168,74,0.5); }
.atlas-grid { flex: 1; overflow-y: auto; padding: 12px 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; align-content: start; }
.atlas-card { background: rgba(40,30,20,0.85); border: 1px solid #6a5430; border-radius: 8px; padding: 6px; cursor: pointer; text-align: center; transition: transform 0.12s, box-shadow 0.12s; }
.atlas-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.atlas-card.owned { opacity: 0.82; }
.atlas-card-icon-wrap { position: relative; width: 56px; height: 56px; margin: 0 auto 4px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.15); }
.atlas-card-icon { max-width: 48px; max-height: 48px; object-fit: contain; }
.atlas-card-icon-ph { font-size: 22px; }
.atlas-card-set { position: absolute; top: -5px; right: -5px; background: #c8a84a; color: #241a10; font-size: 10px; font-weight: 700; border-radius: 4px; padding: 1px 4px; }
.atlas-card-owned { position: absolute; top: -5px; left: -5px; background: #4ade80; color: #06240f; font-size: 11px; font-weight: 800; border-radius: 50%; width: 16px; height: 16px; line-height: 16px; text-align: center; }
.atlas-card-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atlas-card-meta { font-size: 11px; color: #a8987c; margin: 2px 0; }
.atlas-card-attrs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.atlas-attr { font-size: 10px; color: #8fd0a0; background: rgba(80,180,120,0.12); padding: 0 4px; border-radius: 3px; }
.atlas-empty { grid-column: 1 / -1; text-align: center; color: #a8987c; padding: 40px 0; }
.atlas-detail { display: flex; gap: 14px; padding: 12px 18px; background: rgba(0,0,0,0.35); border-bottom: 1px solid #5a4428; align-items: flex-start; }
.atlas-detail-icon-wrap { width: 84px; height: 84px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.2); flex-shrink: 0; }
.atlas-detail-icon { max-width: 76px; max-height: 76px; object-fit: contain; }
.atlas-detail-icon-ph { font-size: 34px; }
.atlas-detail-info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.atlas-detail-name { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.atlas-set-tag { background: #c8a84a; color: #241a10; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.atlas-owned-tag { background: #4ade80; color: #06240f; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.atlas-detail-meta { color: #b8a888; font-size: 12px; }
.atlas-detail-desc { color: #d8c8a8; font-size: 12px; line-height: 1.5; }
.atlas-detail-attrs { display: flex; flex-wrap: wrap; gap: 6px; }
.atlas-detail-set { font-size: 12px; color: #f0c868; }
.atlas-set-name { font-weight: 700; margin-right: 8px; }
.atlas-set-desc { color: #b8a888; }
.atlas-detail-close { background: #5a3d22; color: #f5e6c8; border: 1px solid #8a6a3f; border-radius: 6px; padding: 4px 12px; cursor: pointer; flex-shrink: 0; }
.atlas-open-btn { background: #4a3518; color: #ffe0a0; border: 1px solid #a88440; border-radius: 6px; font-size: 11px; padding: 2px 8px; cursor: pointer; }
.atlas-open-btn:hover { background: #6a4f28; }

/* ===== 商店新图标与等级（v118） ===== */
.shop-item-icon-wrap { position: relative; }
.shop-item-icon-img { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; border: 1px solid; background: rgba(0,0,0,0.2); padding: 2px; }
.shop-item-lv { font-size: 10px; color: #8fa8c8; border: 1px solid #8fa8c8; border-radius: 3px; padding: 0 3px; margin-left: 4px; vertical-align: 1px; }
.shop-level-req { font-size: 11px; color: #ffb0a0; margin-right: 6px; }

/* ===== 背包真实图标（v118） ===== */
.bag-item-icon-img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; background: rgba(0,0,0,0.15); }

/* 图鉴套装筛选按钮（v118h） */
.atlas-filter-btn.set-on { border-color: #c8a84a; color: #f0d48a; }
.atlas-filter-btn.set-on.active { background: #7a5a20; border-color: #ffd700; box-shadow: 0 0 8px rgba(255,215,0,0.5); }

/* 套装集齐标记（v118j） */
.atlas-filter-btn.set-done { border-color: #4ade80; color: #7dffa8; box-shadow: 0 0 6px rgba(74,222,128,0.4); }
.atlas-filter-btn.set-done.active { background: #1e5a30; }



/* 侧栏面板滚动（v118m2） */
.game-sidebar-left { overflow: hidden; }
.sidebar-panel { overflow-y: auto; max-height: calc(100vh - 120px); scrollbar-width: thin; }





/* 侧栏灵兽坐骑：上下两行+图标（v118z8） */

.petmount-row { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #fff; line-height: 24px; white-space: nowrap; cursor: pointer; border-radius: 3px; padding: 0 2px; }
.petmount-row:hover { background: rgba(232,184,74,0.18); }
.petmount-strip { display: flex; flex-direction: column; gap: 2px; padding: 4px 6px; margin: 2px 0 4px; border-left: 2px solid #c8a84a; background: rgba(200,168,74,0.07); border-radius: 4px; }
.petmount-row { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #efe2c2; line-height: 22px; white-space: nowrap; }
.petmount-icon { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.petmount-emoji { font-size: 15px; flex-shrink: 0; }
.petmount-kind { font-style: normal; font-size: 10px; padding: 0 4px; border-radius: 3px; color: #fff; line-height: 15px; flex-shrink: 0; }
.petmount-kind-mount { background: #a8743a; }
.petmount-kind-pet { background: #4a7a5a; }
.petmount-name { font-weight: 600; }
.petmount-lv { color: #f0d48a; font-style: normal; font-size: 11px; margin-left: auto; }

/* 侧栏灵兽坐骑：上下两行+图标（v118z10 高亮） */
.petmount-strip { display: flex; flex-direction: column; gap: 3px; padding: 5px 7px; margin: 2px 0 4px; border-left: 3px solid #e8b84a; background: rgba(60,42,20,0.55); border-radius: 4px; }
.petmount-icon { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 3px rgba(0,0,0,0.4); }
.petmount-emoji { font-size: 16px; flex-shrink: 0; }
.petmount-kind { font-style: normal; font-size: 10px; padding: 0 5px; border-radius: 3px; color: #fff; line-height: 16px; flex-shrink: 0; }
.petmount-kind-mount { background: #a8743a; }
.petmount-kind-pet { background: #4a7a5a; }
.petmount-name { font-weight: 700; color: #ffe9a8; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.petmount-lv { color: #ffd94d; font-style: normal; font-size: 12px; font-weight: 700; margin-left: auto; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }

/* 战斗界面出战灵兽/坐骑（v118z14） */
.battle-petmount { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
.battle-petmount-item { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.35); border: 1px solid rgba(232,184,74,0.4); border-radius: 12px; padding: 2px 8px; font-size: 11px; color: #f0d48a; }
.battle-petmount-icon { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.battle-petmount-item em { font-style: normal; color: #ffd94d; }

/* ===== 战斗立绘组合：坐骑左后 / 玩家居中 / 宠物右后 ===== */
.battle-side-group {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  position: relative;
}
.battle-ally {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.battle-ally-mount {
  margin-right: -8px;
  margin-bottom: 26px;
  transform: scale(0.82);
  opacity: 0.92;
}
.battle-ally-pet {
  margin-left: -8px;
  margin-bottom: 14px;
  transform: scale(0.88);
}
.battle-ally-frame {
  width: 64px;
  height: 64px;
  border: 2px solid;
  border-radius: 14px;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}
.battle-ally-mount .battle-ally-frame {
  width: 74px;
  height: 58px;
  border-radius: 12px;
}
.battle-ally-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.battle-ally-label {
  font-size: 11px;
  color: #e8c987;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  line-height: 1.2;
}
.battle-ally-label em {
  font-style: normal;
  color: #ffd94d;
  margin-left: 3px;
}

/* 宠物/坐骑专属技能展示（v118z15） */
.pet-detail-skill, .mount-detail-skill {
  margin: 10px 0 4px;
  padding: 8px 10px;
  background: rgba(20, 12, 4, 0.55);
  border: 1px solid rgba(232, 184, 74, 0.45);
  border-radius: 8px;
}
.pet-detail-skill-title, .mount-detail-skill-title {
  font-size: 13px;
  font-weight: bold;
  color: #ffd94d;
  margin-bottom: 5px;
  letter-spacing: 1px;
}
.pet-detail-skill-row, .mount-detail-skill-row {
  font-size: 12px;
  line-height: 1.5;
  color: #e8d5b0;
}
.pet-skill-name, .mount-skill-name {
  color: #ffb84d;
  font-weight: bold;
}
.pet-skill-desc, .mount-skill-desc { color: #d8c8a8; }
.pet-detail-skill-effect, .mount-detail-skill-effect {
  margin-top: 4px;
  font-size: 11px;
  color: #7ef0a8;
}

/* 宠物/坐骑突破系统（v118z18） */
.pet-action-btn.break, .mount-action-btn.break {
  background: linear-gradient(135deg, #8a2b2b, #d9534f);
  border: 1px solid #ffb84d;
  color: #ffe9a8;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.pet-action-btn.break:hover, .mount-action-btn.break:hover { background: linear-gradient(135deg, #a83535, #e8665f); }
.pet-break-stars, .mount-break-stars {
  font-size: 14px;
  color: #ffd94d;
  text-align: center;
  letter-spacing: 3px;
  margin-top: 4px;
  text-shadow: 0 0 6px rgba(255, 200, 60, 0.5);
}
.pet-detail-break, .mount-detail-break {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 8px;
  background: linear-gradient(135deg, #8a2b2b, #d9534f);
  color: #ffe9a8;
  font-size: 11px;
  font-weight: bold;
  border: 1px solid #ffb84d;
}

/* ===== 灵兽图鉴 ===== */
.codex-modal { background: linear-gradient(135deg, #2d2418, #1a1510); border: 2px solid #c9a96e; border-radius: 12px; width: 760px; max-height: 84vh; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.codex-body { padding: 14px 18px; max-height: 58vh; overflow-y: auto; }
.codex-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.codex-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(201,169,110,0.25); border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: all .15s; }
.codex-card:hover { border-color: #c9a96e; background: rgba(201,169,110,0.08); }
.codex-card.owned { border-color: rgba(76,175,80,0.5); }
.codex-card-head { display: flex; gap: 10px; align-items: center; }
.codex-card-img { width: 96px; height: 96px; flex-shrink: 0; border: 1px solid rgba(201,169,110,0.35); border-radius: 8px; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.codex-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.codex-card-emoji { font-size: 34px; }
.codex-badge { position: absolute; top: 4px; right: 4px; font-style: normal; background: rgba(76,175,80,0.9); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 8px; }
.codex-card-title { display: flex; flex-direction: column; gap: 3px; }
.codex-name { font-size: 17px; font-weight: bold; }
.codex-quality { font-size: 11px; border: 1px solid; border-radius: 8px; padding: 1px 8px; width: fit-content; }
.codex-desc { color: #b8a88a; font-size: 12px; line-height: 1.5; margin: 7px 0 6px; }
.codex-row { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: #b8a88a; margin-top: 4px; }
.codex-row-label { color: #6b5d4f; flex-shrink: 0; }
.codex-skill { color: #ffd54f; font-weight: bold; }
.codex-row-desc { flex: 1; color: #c9c2b5; }
.codex-footer { padding: 10px 18px; border-top: 1px solid rgba(201,169,110,0.2); color: #6b5d4f; font-size: 12px; text-align: center; }

.petmount-codex-entry { display: flex; margin: 8px 0 4px; }
.petmount-codex-btn { flex: 1; padding: 6px 0; background: rgba(201,169,110,0.15); border: 1px solid rgba(201,169,110,0.4); border-radius: 6px; color: #e8d9b0; font-size: 12px; cursor: pointer; text-align: center; }
.petmount-codex-btn:hover { background: rgba(201,169,110,0.3); }

/* ===== 战斗受击反馈（怪物先闪、玩家延迟闪） ===== */
.battle-combatant.battle-hit .battle-portrait-img,
.battle-ally.battle-hit .battle-ally-img {
  animation: portraitHit 0.5s ease !important;
  filter: brightness(1.7) sepia(0.5) hue-rotate(-40deg) drop-shadow(0 0 14px rgba(255,70,70,0.95)) !important;
}
.battle-combatant.battle-hit {
  animation: combatantShake 0.4s ease;
}
@keyframes combatantShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* 自动战斗状态提示 */
.battle-auto-tag {
  display: inline-block;
  background: linear-gradient(180deg, #d97706, #b45309);
  color: #fff;
  border: 1px solid #fbbf24;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  margin-top: 4px;
  animation: autoBlink 1.2s ease-in-out infinite;
}
@keyframes autoBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* 战斗日志滚动区（防止自动战斗日志无限撑高） */
.battle-log-new {
  max-height: 66px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.battle-log-new::-webkit-scrollbar { width: 4px; }
.battle-log-new::-webkit-scrollbar-thumb { background: rgba(220,38,38,0.5); border-radius: 2px; }


/* ===== 副本弹窗增强（战力对比/星级/掉落预览/扫荡） ===== */
.dungeon-card { position: relative; }
.dungeon-card-difficulty {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  font-size: 10px; text-align: center; color: #fff; padding: 1px 0; opacity: 0.92;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.dungeon-card-icon-wrap { position: relative; width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08); }
.dungeon-card-icon-wrap .dungeon-icon-img { width: 100%; height: 100%; object-fit: contain; }
.dungeon-icon-fallback { display: flex; align-items: center; justify-content: center; font-size: 24px; color: #d4af37; background: rgba(0,0,0,0.35); }
.dungeon-stars { color: #fbbf24; font-size: 10px; margin-left: 4px; letter-spacing: 1px; }
.dungeon-cleared-tag { color: #22c55e; font-size: 11px; margin-left: 4px; font-weight: bold; }
.dungeon-first-tag { background: linear-gradient(180deg, #f59e0b, #b45309); color: #fff; font-size: 9px; border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: middle; }
.dungeon-card-level { color: #94a3b8; font-size: 11px; margin: 2px 0; }
.dungeon-card-count { color: #64748b; font-size: 11px; display: flex; align-items: center; }
.dungeon-card-status { color: #64748b; font-size: 10px; }
.dungeon-power-compare { background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.power-compare-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin: 3px 0; }
.power-label { color: #a5b4fc; }
.power-val { color: #e2e8f0; font-weight: bold; }
.power-val.ok { color: #4ade80; }
.power-val.low { color: #f87171; }
.power-compare-tip { font-size: 11px; margin-top: 4px; text-align: center; }
.power-compare-tip.ok { color: #4ade80; }
.power-compare-tip.low { color: #f87171; }
.dungeon-stage { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,0.2); margin-bottom: 6px; border: 1px solid rgba(255,255,255,0.06); }
.dungeon-stage.boss { border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.06); }
.stage-num { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #e2e8f0; font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dungeon-stage.boss .stage-num { background: rgba(251, 191, 36, 0.3); color: #fbbf24; }
.stage-icon-wrap { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(0,0,0,0.35); overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }
.stage-icon-wrap .stage-icon-img { width: 100%; height: 100%; object-fit: contain; }
.stage-icon-emoji { font-size: 20px; }
.stage-info { flex: 1; min-width: 0; }
.stage-name { color: #e2e8f0; font-size: 12px; font-weight: bold; display: flex; align-items: center; gap: 5px; }
.boss-tag { background: linear-gradient(180deg, #f59e0b, #b45309); color: #fff; font-size: 9px; border-radius: 4px; padding: 0 4px; }
.stage-monster { color: #94a3b8; font-size: 10px; margin-top: 1px; }
.dungeon-drops { margin-top: 12px; }
.section-title { color: #cbd5e1; font-size: 12px; font-weight: bold; margin-bottom: 6px; }
.drop-list { display: flex; flex-wrap: wrap; gap: 6px; }
.drop-item { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 3px 8px; font-size: 11px; }
.drop-item.first { border-color: #fbbf24; background: rgba(251, 191, 36, 0.08); }
.drop-item-icon { font-size: 12px; }
.drop-item-name { color: #e2e8f0; }
.drop-item-count { color: #94a3b8; }
.dungeon-reward-panel .reward-item.first { border: 1px solid #fbbf24; border-radius: 6px; background: rgba(251, 191, 36, 0.08); }
.info-val.cleared { color: #22c55e; }
.dungeon-actions { display: flex; gap: 8px; margin-top: 10px; }
.dungeon-sweep-btn {
  flex: 1; padding: 9px 0; background: linear-gradient(180deg, #7c3aed, #6d28d9); border: 1px solid #a78bfa;
  border-radius: 8px; color: #fff; cursor: pointer; font-size: 13px; font-weight: bold;
}
.dungeon-sweep-btn:hover { filter: brightness(1.15); }
.battle-dungeon-buttons { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }

/* ===== 副本弹窗 · 专业版 V2（覆盖旧散落样式，最高优先级） ===== */
.dungeon-modal-new .dungeon-card-difficulty {
  position: absolute; top: 0; bottom: 0; left: 0; right: auto;
  width: 5px; z-index: 2; opacity: 1;
  font-size: 0; padding: 0; color: transparent;
}
.dungeon-modal-new .dungeon-card {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px 9px 14px;
  background: linear-gradient(90deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid rgba(200,160,74,0.15);
  border-radius: 8px;
  overflow: hidden;
}
.dungeon-modal-new .dungeon-card-icon-wrap {
  width: 42px; height: 42px; flex-shrink: 0;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(200,160,74,0.3);
  border-radius: 8px; overflow: hidden;
}
.dungeon-modal-new .dungeon-card-icon-wrap .dungeon-icon-img { object-fit: cover; }
.dungeon-modal-new .dungeon-icon-fallback { font-size: 20px; color: #d8c08a; }
.dungeon-modal-new .dungeon-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dungeon-modal-new .dungeon-card-name {
  font-size: 14px; font-weight: bold; color: #f0e6cc;
  display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden;
}
.dungeon-modal-new .dungeon-cleared-tag {
  color: #4ade80; font-size: 10px; font-weight: bold; margin-left: 0;
  background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.4);
  border-radius: 4px; padding: 0 4px; flex-shrink: 0;
}
.dungeon-modal-new .dungeon-first-tag {
  background: linear-gradient(180deg, #f59e0b, #b45309); color: #fff;
  font-size: 9px; border-radius: 4px; padding: 0 4px; margin-left: 0; flex-shrink: 0;
}
.dungeon-modal-new .dungeon-card-level { color: #a8a08c; font-size: 12px; margin: 0; }
.dungeon-modal-new .dungeon-card-count { color: #c8b78a; font-size: 12px; display: flex; align-items: center; gap: 5px; }
.dungeon-modal-new .dungeon-stars { color: #fbbf24; font-size: 11px; margin-left: 0; letter-spacing: 1px; }
.dungeon-modal-new .dungeon-card-status {
  flex-shrink: 0; font-size: 11px; padding: 3px 9px; border-radius: 10px;
  background: rgba(74,222,128,0.12); color: #6ee7a0;
  border: 1px solid rgba(74,222,128,0.3); white-space: nowrap;
}
.dungeon-modal-new .dungeon-card.locked .dungeon-card-status {
  background: rgba(255,255,255,0.06); color: #8a8a8a; border-color: rgba(255,255,255,0.15);
}
.dungeon-modal-new .dungeon-card:hover:not(.locked) {
  background: rgba(200,160,74,0.12); border-color: rgba(200,160,74,0.45); transform: translateX(3px);
}
.dungeon-modal-new .dungeon-card.selected {
  background: rgba(200,160,74,0.16); border-color: #c8a04a;
  box-shadow: inset 0 0 0 1px rgba(200,160,74,0.3);
}
.dungeon-modal-new .dungeon-card.locked { opacity: 0.45; }
.dungeon-modal-new .dungeon-detail-name { font-size: 17px; font-weight: bold; color: #f0e6cc; display: flex; align-items: center; gap: 8px; }
.dungeon-modal-new .dungeon-detail-diff { font-size: 12px; padding: 2px 9px; border-radius: 10px; background: rgba(0,0,0,0.3); border: 1px solid currentColor; flex-shrink: 0; }
.dungeon-modal-new .dungeon-detail-desc { font-size: 12.5px; color: #b0a888; margin-top: 5px; line-height: 1.6; }
.dungeon-modal-new .section-title { color: #e8c877; font-size: 13px; font-weight: bold; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.dungeon-modal-new .dungeon-stage {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(200,160,74,0.13); margin-bottom: 8px;
}
.dungeon-modal-new .dungeon-stage.boss {
  border-color: rgba(194,58,43,0.4); background: rgba(194,58,43,0.08);
}
.dungeon-modal-new .stage-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(200,160,74,0.15); color: #e8c877;
  font-size: 12px; font-weight: bold; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(200,160,74,0.35);
}
.dungeon-modal-new .dungeon-stage.boss .stage-num {
  background: rgba(194,58,43,0.2); color: #f87171; border-color: rgba(194,58,43,0.5);
}
.dungeon-modal-new .stage-icon-wrap {
  width: 40px; height: 40px; flex-shrink: 0;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(200,160,74,0.25);
  border-radius: 8px; overflow: hidden;
}
.dungeon-modal-new .stage-icon-wrap .stage-icon-img { object-fit: cover; }
.dungeon-modal-new .stage-icon-emoji { font-size: 20px; }
.dungeon-modal-new .stage-info { flex: 1; min-width: 0; }
.dungeon-modal-new .stage-name { color: #e8e0cc; font-size: 13.5px; font-weight: bold; display: flex; align-items: center; gap: 6px; }
.dungeon-modal-new .boss-tag { background: linear-gradient(90deg, #c23a2b, #a82d20); font-size: 10px; padding: 1px 6px; }
.dungeon-modal-new .stage-monster { color: #9a8f78; font-size: 12px; margin-top: 2px; }
.dungeon-modal-new .dungeon-stage.boss .stage-monster { color: #f0a0a0; }
.dungeon-modal-new .dungeon-drops { margin-top: 4px; }
.dungeon-modal-new .drop-list { display: flex; flex-wrap: wrap; gap: 8px; }
.dungeon-modal-new .drop-item {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(200,160,74,0.2);
  border-radius: 6px; padding: 6px 10px; font-size: 12px;
}
.dungeon-modal-new .drop-item.first { border-color: rgba(251,191,36,0.5); background: rgba(251,191,36,0.08); }
.dungeon-modal-new .drop-item-icon { font-size: 14px; }
.dungeon-modal-new .drop-item-name { color: #e0d8c0; }
.dungeon-modal-new .drop-item-count { color: #fbbf24; font-weight: bold; }
.dungeon-modal-new .dungeon-power-compare {
  background: rgba(59,130,246,0.07); border: 1px solid rgba(59,130,246,0.3);
  border-radius: 8px; padding: 12px; margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 7px;
}
.dungeon-modal-new .power-compare-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin: 0; }
.dungeon-modal-new .power-label { color: #b0a888; }
.dungeon-modal-new .power-val { color: #f0e6cc; font-weight: bold; }
.dungeon-modal-new .power-val.ok { color: #4ade80; }
.dungeon-modal-new .power-val.low { color: #f87171; }
.dungeon-modal-new .power-compare-tip { font-size: 12px; padding: 5px 8px; border-radius: 6px; text-align: center; margin-top: 0; }
.dungeon-modal-new .power-compare-tip.ok { color: #4ade80; background: rgba(74,222,128,0.1); }
.dungeon-modal-new .power-compare-tip.low { color: #f87171; background: rgba(248,113,113,0.1); }
.dungeon-modal-new .reward-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; font-size: 13px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(200,160,74,0.13);
  border-radius: 6px; margin-bottom: 6px;
}
.dungeon-modal-new .reward-icon { font-size: 15px; }
.dungeon-modal-new .reward-name { flex: 1; color: #e0d8c0; }
.dungeon-modal-new .reward-count { color: #fbbf24; font-weight: bold; }
.dungeon-modal-new .dungeon-reward-panel .reward-item.first { border-color: rgba(251,191,36,0.5); background: rgba(251,191,36,0.08); }
.dungeon-modal-new .info-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; padding: 6px 10px;
  background: rgba(255,255,255,0.02); border-radius: 6px; margin-bottom: 6px;
}
.dungeon-modal-new .info-label { color: #a8a08c; }
.dungeon-modal-new .info-val { color: #f0e6cc; font-weight: bold; }
.dungeon-modal-new .info-val.cleared { color: #4ade80; }
.dungeon-modal-new .dungeon-actions { display: flex; gap: 10px; margin-top: 12px; }
.dungeon-modal-new .dungeon-sweep-btn {
  flex: 1; padding: 11px 0; font-size: 15px; font-weight: bold;
  background: linear-gradient(135deg, #4ade80, #22a55a);
  border: none; border-radius: 8px; color: #fff; cursor: pointer;
  box-shadow: 0 4px 14px rgba(74,222,128,0.25);
}
.dungeon-modal-new .dungeon-sweep-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.dungeon-modal-new .dungeon-enter-btn {
  flex: 1; padding: 11px 0; font-size: 15px; font-weight: bold;
  background: linear-gradient(135deg, #c8a04a, #a97c2c);
  border: none; border-radius: 8px; color: #fff; cursor: pointer;
  box-shadow: 0 4px 14px rgba(200,160,74,0.3);
}
.dungeon-modal-new .dungeon-enter-btn:hover:not(.disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.dungeon-modal-new .dungeon-enter-btn.disabled { background: #3a352c; color: #7a7262; cursor: not-allowed; box-shadow: none; }
.dungeon-modal-new .dungeon-detail-icon {
  width: 62px; height: 62px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(200,160,74,0.35);
  background: rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
}
.dungeon-modal-new .dungeon-detail-icon-img { object-fit: cover; }
.dungeon-modal-new .dungeon-modal-overlay { z-index: 520; }

/* ===== 副本弹窗 · 专业版 V3（强制尺寸/网格覆盖旧 !important） ===== */
.dungeon-modal-new {
  width: 1120px !important;
  height: 78vh !important;
  max-height: 780px !important;
  max-width: 95vw !important;
  border: 2px solid #c8a04a !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #251e15 0%, #19140d 60%, #120e09 100%) !important;
}
.dungeon-modal-new .dungeon-body {
  display: grid !important;
  grid-template-columns: 24% 46% 30% !important;
  gap: 12px !important;
  padding: 14px !important;
  overflow: hidden !important;
}
.dungeon-modal-new .dungeon-left-panel {
  width: auto !important;
  padding: 0 !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(200,160,74,0.16) !important;
  border-right: 1px solid rgba(200,160,74,0.16) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  min-height: 0 !important;
}
.dungeon-modal-new .dungeon-center-panel,
.dungeon-modal-new .dungeon-right-panel {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(200,160,74,0.16) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  min-height: 0 !important;
}
.dungeon-modal-new .panel-title {
  text-align: left !important;
  padding: 9px 14px !important;
  margin-bottom: 0 !important;
  background: linear-gradient(90deg, rgba(200,160,74,0.14), transparent) !important;
  border-bottom: 1px solid rgba(200,160,74,0.2) !important;
  letter-spacing: 2px !important;
  color: #e8c877 !important;
  flex-shrink: 0 !important;
}
.dungeon-modal-new .dungeon-list {
  padding: 10px !important;
  gap: 8px !important;
  min-height: 0 !important;
}
.dungeon-modal-new .dungeon-card {
  min-height: 58px !important;
  padding: 8px 10px 8px 14px !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(200,160,74,0.15) !important;
  background: linear-gradient(90deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)) !important;
}
.dungeon-modal-new .dungeon-card-icon-wrap {
  width: 42px !important; height: 42px !important;
  flex-shrink: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(200,160,74,0.3) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.dungeon-modal-new .dungeon-card-info {
  flex: 1 !important; min-width: 0 !important;
  display: flex !important; flex-direction: column !important; gap: 3px !important;
}
.dungeon-modal-new .dungeon-card-name {
  font-size: 14px !important; font-weight: bold !important; color: #f0e6cc !important;
  display: flex !important; align-items: center !important; gap: 5px !important;
  white-space: nowrap !important; overflow: hidden !important;
}
.dungeon-modal-new .dungeon-card-status {
  flex-shrink: 0 !important;
}
.dungeon-modal-new .dungeon-detail {
  padding: 12px 14px !important;
  gap: 12px !important;
  min-height: 0 !important;
}
.dungeon-modal-new .dungeon-reward-panel {
  padding: 12px 14px !important;
  gap: 12px !important;
  min-height: 0 !important;
}
.dungeon-modal-new .dungeon-top-bar {
  padding: 13px 20px !important;
  background: linear-gradient(90deg, rgba(200,160,74,0.16), rgba(200,160,74,0.04) 50%, rgba(200,160,74,0.16)) !important;
  border-bottom: 1px solid rgba(200,160,74,0.32) !important;
}
.dungeon-modal-new .dungeon-title-text {
  color: #e8c877 !important;
  font-size: 21px !important;
  text-shadow: 0 0 14px rgba(232,200,119,0.4) !important;
}

/* ===== 副本弹窗 · 专业版 V4（高度自适应视口，底部不被裁切） ===== */
.dungeon-modal-new {
  height: min(78vh, calc(100vh - 36px)) !important;
  max-height: none !important;
  min-height: 420px !important;
}
.dungeon-modal-overlay.dungeon-modal-overlay { align-items: center; }
.dungeon-modal-new .dungeon-body { min-height: 0 !important; }
.dungeon-modal-new .dungeon-left-panel,
.dungeon-modal-new .dungeon-center-panel,
.dungeon-modal-new .dungeon-right-panel {
  min-height: 0 !important;
  overflow: hidden !important;
}
.dungeon-modal-new .dungeon-list,
.dungeon-modal-new .dungeon-detail,
.dungeon-modal-new .dungeon-reward-panel {
  min-height: 0 !important;
  overflow-y: auto !important;
}
.dungeon-modal-new .dungeon-actions {
  flex-shrink: 0 !important;
  padding-bottom: 2px !important;
}

/* ===== 副本弹窗 · 专业版 V5（充分利用视口高度，操作按钮完整露出） ===== */
.dungeon-modal-new {
  height: min(88vh, calc(100vh - 28px)) !important;
  max-height: none !important;
  min-height: 480px !important;
}
/* 右侧面板：内容区滚动，操作按钮固定在底部 */
.dungeon-modal-new .dungeon-reward-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px 14px 12px !important;
}
.dungeon-modal-new .dungeon-power-compare { padding: 9px 12px !important; margin-bottom: 0 !important; gap: 5px !important; }
.dungeon-modal-new .dungeon-reward-panel .section-title { margin-bottom: 5px !important; font-size: 12.5px !important; }
.dungeon-modal-new .dungeon-reward-panel .reward-item { padding: 6px 10px !important; margin-bottom: 4px !important; font-size: 12.5px !important; }
.dungeon-modal-new .dungeon-reward-panel .info-row { padding: 5px 10px !important; margin-bottom: 4px !important; font-size: 12.5px !important; }
.dungeon-modal-new .dungeon-reward-panel .dungeon-info { gap: 4px !important; }
.dungeon-modal-new .dungeon-actions {
  margin-top: auto !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(200,160,74,0.15) !important;
  flex-shrink: 0 !important;
}
.dungeon-modal-new .dungeon-sweep-btn,
.dungeon-modal-new .dungeon-enter-btn { padding: 10px 0 !important; font-size: 14.5px !important; }
/* 中间详情面板同样紧凑一屏放下 */
.dungeon-modal-new .dungeon-detail { gap: 8px !important; padding: 10px 14px !important; }
.dungeon-modal-new .dungeon-stage { padding: 7px 10px !important; margin-bottom: 6px !important; }
.dungeon-modal-new .dungeon-drops { margin-top: 0 !important; }



/* ===== 背包专业版（分类/整理/40格/宝石栏） ===== */
.bag-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.bag-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.bag-assets {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  font-size: 12px;
}
.bag-capacity {
  font-size: 11px;
  color: var(--ink-gray);
  border-left: 1px solid rgba(139,115,85,0.3);
  padding-left: 8px;
}
.bag-expand-btn {
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid #c69c3a;
  background: linear-gradient(180deg, #f5e6c2, #e3cd96);
  color: #6b4a12;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.bag-expand-btn:hover { background: linear-gradient(180deg, #c69c3a, #9a7b2f); color: #fff; }
.bag-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(139,115,85,0.25);
}
.bag-pgbtn {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid rgba(139,115,85,0.4);
  background: rgba(255,255,255,0.6);
  color: #5a4632;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}
.bag-pgbtn:hover:not(:disabled) { background: var(--vermilion); color: #fff; border-color: var(--vermilion); }
.bag-pgbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.bag-pgtext { font-size: 11px; color: var(--ink-gray); letter-spacing: 1px; }
.bag-cats {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.bag-cat-btn {
  font-size: 11px;
  padding: 3px 10px;
  border: 1px solid rgba(139,115,85,0.4);
  background: rgba(255,255,255,0.5);
  color: #5a4632;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}
.bag-cat-btn:hover { border-color: var(--vermilion); color: var(--vermilion); }
.bag-cat-btn.active { background: var(--vermilion); color: #fff; border-color: var(--vermilion); }
.bag-sort-btn {
  font-size: 11px;
  padding: 3px 10px;
  border: 1px solid rgba(139,115,85,0.4);
  background: rgba(255,255,255,0.5);
  color: #5a4632;
  border-radius: 3px;
  cursor: pointer;
  margin-left: auto;
  transition: all 0.2s;
}
.bag-sort-btn:hover { background: var(--vermilion); color: #fff; border-color: var(--vermilion); }
.bag-grid-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.bag-count-text { font-size: 11px; color: var(--ink-gray); }
.gem-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}
.gem-item {
  position: relative;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 4px;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: all 0.2s;
}
.gem-item:hover { border-color: var(--gold); transform: scale(1.06); }
.gem-glyph { font-size: 22px; line-height: 1; }
.gem-count {
  position: absolute;
  bottom: 1px;
  right: 3px;
  font-size: 10px;
  color: #fff;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.gem-name {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  white-space: nowrap;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  pointer-events: none;
}
/* 装备对比 */
.item-compare {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 4px;
}
.item-compare-title {
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 6px;
  font-weight: 600;
}
.item-compare-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 2px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.item-compare-row:last-child { border-bottom: none; }
.diff-up { color: #4ade80; font-weight: 600; }
.diff-down { color: #f87171; font-weight: 600; }
.diff-eq { color: #9ca3af; }

/* ===== 帮派系统弹窗 ===== */
.clan-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 300; display: flex; align-items: center; justify-content: center; animation: sectFadeIn .2s; }
.clan-modal { width: 900px; max-width: 94vw; max-height: 88vh; background: linear-gradient(160deg, #2a2118 0%, #1d1711 100%); border: 2px solid #8a6d3b; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.7); display: flex; flex-direction: column; overflow: hidden; }
.clan-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: linear-gradient(180deg, #3a2e1e, #241c12); border-bottom: 1px solid #8a6d3b; }
.clan-header h2 { color: #f5d98b; font-size: 20px; margin: 0; letter-spacing: 2px; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.clan-close { background: rgba(255,255,255,.06); border: 1px solid #8a6d3b; color: #e8d5b5; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.clan-close:hover { background: #8a2020; border-color: #b04040; }

/* 创建页 */
.clan-create-body { display: flex; gap: 16px; padding: 16px; min-height: 420px; }
.clan-create-panel { flex: 0 0 330px; background: rgba(255,255,255,.04); border: 1px solid rgba(138,109,59,.4); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.clan-create-title { color: #f5d98b; font-size: 17px; font-weight: bold; text-align: center; }
.clan-create-tips { display: flex; gap: 8px; justify-content: center; }
.clan-create-tips span { background: rgba(138,109,59,.2); border: 1px solid rgba(138,109,59,.5); color: #e8d5b5; font-size: 11px; padding: 3px 10px; border-radius: 20px; }
.clan-create-row { display: flex; flex-direction: column; gap: 6px; }
.clan-label { color: #cbb489; font-size: 13px; }
.clan-name-input { background: #14100b; border: 1px solid #8a6d3b; border-radius: 8px; color: #f5e6c8; padding: 9px 12px; font-size: 14px; outline: none; }
.clan-name-input:focus { border-color: #f5d98b; }
.clan-badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.clan-badge-opt { height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 19px; font-weight: bold; cursor: pointer; border: 2px solid transparent; text-shadow: 0 2px 4px rgba(0,0,0,.6); transition: all .15s; }
.clan-badge-opt:hover { transform: scale(1.06); }
.clan-badge-opt.active { border-color: #f5d98b; box-shadow: 0 0 12px rgba(245,217,139,.5); }
.clan-create-btn { background: linear-gradient(180deg, #b8860b, #8a5a00); border: 1px solid #f5d98b; color: #fff; font-size: 16px; font-weight: bold; padding: 11px; border-radius: 10px; cursor: pointer; letter-spacing: 3px; margin-top: auto; }
.clan-create-btn:hover { filter: brightness(1.15); }
.clan-create-btn:disabled { opacity: .6; cursor: not-allowed; }

.clan-list-panel { flex: 1; background: rgba(255,255,255,.04); border: 1px solid rgba(138,109,59,.4); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.clan-list-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid rgba(138,109,59,.35); }
.clan-list-title { color: #f5d98b; font-size: 15px; font-weight: bold; margin-right: auto; }
.clan-search-input { background: #14100b; border: 1px solid #8a6d3b; border-radius: 8px; color: #f5e6c8; padding: 6px 10px; font-size: 13px; width: 150px; outline: none; }
.clan-search-btn { background: #3a2e1e; border: 1px solid #8a6d3b; color: #f5d98b; padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.clan-search-btn:hover { background: #4a3a24; }
.clan-list-scroll { flex: 1; overflow-y: auto; padding: 8px; }
.clan-list-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid rgba(138,109,59,.2); }
.clan-list-item:hover { background: rgba(138,109,59,.1); }
.clan-list-badge { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 19px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,.6); flex-shrink: 0; }
.clan-list-info { flex: 1; min-width: 0; }
.clan-list-name { color: #f5d98b; font-size: 15px; font-weight: bold; }
.clan-list-meta { color: #a8926a; font-size: 12px; margin-top: 2px; }
.clan-join-btn { background: linear-gradient(180deg, #7a5a20, #5a4010); border: 1px solid #c9a860; color: #ffe9b8; padding: 7px 18px; border-radius: 8px; cursor: pointer; font-size: 13px; flex-shrink: 0; }
.clan-join-btn:hover { filter: brightness(1.2); }
.clan-join-btn:disabled { opacity: .55; cursor: not-allowed; }
.clan-empty { text-align: center; color: #8b7355; padding: 40px 0; font-size: 13px; }

/* 已入帮 */
.clan-top-bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: linear-gradient(180deg, #3a2e1e, #241c12); border-bottom: 1px solid #8a6d3b; }
.clan-top-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.clan-top-badge { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 23px; font-weight: bold; text-shadow: 0 2px 5px rgba(0,0,0,.6); flex-shrink: 0; }
.clan-top-info { min-width: 0; }
.clan-top-name { color: #f5d98b; font-size: 20px; font-weight: bold; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.clan-top-sub { color: #cbb489; font-size: 12px; margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.clan-pos-flag { color: #ffb347; font-weight: bold; }
.clan-top-resources { display: flex; gap: 14px; }
.clan-res-item { text-align: center; }
.clan-res-label { display: block; color: #a8926a; font-size: 11px; }
.clan-res-value { color: #f5d98b; font-size: 15px; font-weight: bold; }

.clan-main-content { display: flex; flex: 1; min-height: 0; }
.clan-sidebar { width: 132px; border-right: 1px solid rgba(138,109,59,.4); padding: 10px 6px; display: flex; flex-direction: column; gap: 4px; }
.clan-nav-item { display: flex; align-items: center; gap: 6px; padding: 11px 10px; border-radius: 8px; color: #d9c49a; cursor: pointer; font-size: 14px; white-space: nowrap; }
.clan-nav-item:hover { background: rgba(138,109,59,.18); }
.clan-nav-item.active { background: linear-gradient(90deg, rgba(184,134,11,.4), rgba(184,134,11,.1)); color: #ffe9b8; border: 1px solid rgba(245,217,139,.4); }
.clan-nav-item span { flex-shrink: 0; }
.clan-nav-icon { font-size: 16px; flex-shrink: 0; }
.clan-leave-item { margin-top: auto; color: #d98a6a; border-top: 1px solid rgba(138,109,59,.25); padding-top: 14px; }
.clan-leave-item:hover { background: rgba(160,40,30,.18); }

.clan-content-area { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.clan-notice-box { background: rgba(255,255,255,.04); border: 1px solid rgba(138,109,59,.4); border-radius: 10px; padding: 14px 16px; }
.clan-notice-title { color: #f5d98b; font-size: 14px; font-weight: bold; margin-bottom: 8px; }
.clan-notice-content { color: #e8d5b5; font-size: 14px; line-height: 1.7; }
.clan-bless-box { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(90deg, rgba(184,134,11,.22), rgba(184,134,11,.05)); border: 1px solid rgba(245,217,139,.4); border-radius: 10px; padding: 12px 16px; }
.clan-bless-title { color: #ffd98b; font-size: 15px; font-weight: bold; }
.clan-bless-desc { color: #cbb489; font-size: 12px; margin-top: 3px; }
.clan-bless-btn { background: linear-gradient(180deg, #b8860b, #8a5a00); border: 1px solid #f5d98b; color: #fff; font-size: 14px; font-weight: bold; padding: 9px 22px; border-radius: 9px; cursor: pointer; }
.clan-bless-btn:hover { filter: brightness(1.15); }
.clan-bless-btn.disabled { background: #3a3a3a; border-color: #777; color: #999; cursor: not-allowed; }
.clan-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.clan-info-card { background: rgba(255,255,255,.04); border: 1px solid rgba(138,109,59,.4); border-radius: 10px; padding: 14px 16px; }
.clan-info-card-title { color: #f5d98b; font-size: 14px; font-weight: bold; margin-bottom: 10px; }
.clan-info-row { display: flex; justify-content: space-between; padding: 5px 0; color: #a8926a; font-size: 13px; }
.clan-info-row b { color: #e8d5b5; }
.clan-bonus-list { display: flex; flex-wrap: wrap; gap: 8px; }
.clan-bonus-item { background: rgba(76,175,80,.15); border: 1px solid rgba(76,175,80,.45); color: #8fd69a; padding: 5px 12px; border-radius: 20px; font-size: 12px; }
.clan-members-preview { background: rgba(255,255,255,.04); border: 1px solid rgba(138,109,59,.4); border-radius: 10px; padding: 14px 16px; }
.clan-members-preview-title { color: #f5d98b; font-size: 14px; font-weight: bold; margin-bottom: 10px; }
.clan-members-preview-list { display: flex; flex-wrap: wrap; gap: 8px; }
.clan-member-chip { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.05); border: 1px solid rgba(138,109,59,.3); border-radius: 20px; padding: 5px 12px; font-size: 12px; }
.clan-chip-pos { color: #ffb347; font-size: 11px; }
.clan-chip-pos.leader { color: #ffd700; font-weight: bold; }
.clan-chip-name { color: #e8d5b5; }
.clan-chip-contr { color: #8bd08f; font-size: 11px; }
/* 公告编辑 */
.clan-notice-title { display: flex; align-items: center; justify-content: space-between; }
.clan-ann-edit-btn { background: rgba(184,134,11,.25); border: 1px solid rgba(245,217,139,.5); color: #ffd98b; font-size: 12px; padding: 3px 12px; border-radius: 6px; cursor: pointer; }
.clan-ann-edit-btn:hover { filter: brightness(1.2); }
.clan-ann-edit { margin-top: 4px; }
.clan-ann-input { width: 100%; box-sizing: border-box; background: rgba(0,0,0,.35); border: 1px solid rgba(138,109,59,.5); border-radius: 8px; color: #e8d5b5; font-size: 13px; padding: 8px 10px; resize: none; font-family: inherit; }
.clan-ann-input:focus { outline: none; border-color: #f5d98b; }
.clan-ann-edit-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.clan-ann-save { background: linear-gradient(180deg, #b8860b, #8a5a00); border: 1px solid #f5d98b; color: #fff; font-size: 13px; font-weight: bold; padding: 6px 20px; border-radius: 7px; cursor: pointer; }
.clan-ann-save:disabled { opacity: .6; cursor: not-allowed; }
.clan-ann-cancel { background: rgba(255,255,255,.08); border: 1px solid rgba(200,200,200,.4); color: #cbb489; font-size: 13px; padding: 6px 20px; border-radius: 7px; cursor: pointer; }

/* 大厅底部：日志 + 排行 */
.clan-hall-bottom { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; }
.clan-log-panel, .clan-rank-panel { background: rgba(255,255,255,.04); border: 1px solid rgba(138,109,59,.4); border-radius: 10px; padding: 14px 16px; }
.clan-panel-title { color: #f5d98b; font-size: 14px; font-weight: bold; margin-bottom: 10px; }
.clan-panel-empty { color: #7a6a52; font-size: 13px; padding: 10px 0; text-align: center; }
.clan-log-list { display: flex; flex-direction: column; gap: 6px; max-height: 150px; overflow-y: auto; }
.clan-log-item { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.clan-log-time { color: #6e5f48; flex-shrink: 0; font-size: 11px; }
.clan-log-text { color: #d8c4a0; line-height: 1.5; }
.clan-rank-list { display: flex; flex-direction: column; gap: 7px; }
.clan-rank-item { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(138,109,59,.25); border-radius: 8px; padding: 7px 10px; font-size: 12px; }
.clan-rank-item.mine { border-color: #f5d98b; background: rgba(184,134,11,.15); }
.clan-rank-no { width: 18px; text-align: center; color: #a8926a; font-weight: bold; flex-shrink: 0; }
.clan-rank-no.top { color: #ffd700; }
.clan-rank-badge { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; flex-shrink: 0; }
.clan-rank-name { color: #e8d5b5; font-weight: bold; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clan-rank-lv { color: #ffb347; flex-shrink: 0; }
.clan-rank-members { color: #8bd08f; flex-shrink: 0; }


.clan-members-panel { display: flex; flex-direction: column; }
.clan-members-header, .clan-member-row { display: flex; align-items: center; padding: 9px 12px; font-size: 13px; }
.clan-members-header { color: #a8926a; border-bottom: 1px solid rgba(138,109,59,.4); }
.clan-member-row { border-bottom: 1px solid rgba(138,109,59,.15); }
.clan-member-row:hover { background: rgba(138,109,59,.08); }
.cm-col-avatar { flex: 0 0 48px; display: flex; align-items: center; justify-content: center; }
.cm-col-pos { flex: 0 0 90px; }
.cm-col-name { flex: 1; color: #e8d5b5; }
.cm-col-contr { flex: 0 0 80px; color: #8bd08f; }
.cm-col-time { flex: 0 0 110px; color: #a8926a; font-size: 12px; }
.clan-pos-tag { display: inline-block; background: rgba(138,109,59,.25); border: 1px solid rgba(138,109,59,.5); color: #cbb489; padding: 2px 10px; border-radius: 12px; font-size: 12px; }
.clan-pos-tag.leader { background: rgba(255,215,0,.2); border-color: #ffd700; color: #ffd700; font-weight: bold; }
.cm-me { color: #ffb347; font-style: normal; margin-left: 4px; font-size: 11px; }
.clan-members-foot { text-align: center; color: #8b7355; font-size: 12px; padding: 14px 0; }
.clan-notice { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); background: rgba(30,80,40,.95); border: 1px solid #4caf50; color: #c8f0d0; padding: 8px 24px; border-radius: 10px; font-size: 13px; z-index: 10; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.clan-err { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); background: rgba(90,25,20,.95); border: 1px solid #f44336; color: #ffcdc8; padding: 8px 24px; border-radius: 10px; font-size: 13px; z-index: 10; box-shadow: 0 4px 16px rgba(0,0,0,.5); }

/* 帮派徽章图片 */
.clan-badge-opt { background: rgba(20,16,11,.6); border: 2px solid rgba(138,109,59,.6); padding: 3px; }
.clan-badge-opt img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; display: block; }
.clan-badge-opt.active { border-color: #f5d98b; box-shadow: 0 0 14px rgba(245,217,139,.6); }
.clan-list-badge { background: #14100b; border: 2px solid rgba(138,109,59,.8); overflow: hidden; }
.clan-list-badge img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; }
.clan-top-badge { background: #14100b; border: 2px solid rgba(245,217,139,.7); overflow: hidden; }
.clan-top-badge img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; }

/* 帮派捐献 */
.clan-donate-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: linear-gradient(90deg, rgba(21,101,192,.18), rgba(21,101,192,.05)); border: 1px solid rgba(100,160,220,.45); border-radius: 10px; padding: 12px 16px; flex-wrap: wrap; }
.clan-donate-title { color: #9fc9f0; font-size: 15px; font-weight: bold; }
.clan-donate-desc { color: #8aa6c2; font-size: 12px; margin-top: 3px; }
.clan-donate-btns { display: flex; gap: 10px; }
.clan-donate-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(20,16,11,.7); border: 1px solid rgba(100,160,220,.5); border-radius: 10px; padding: 8px 16px; cursor: pointer; min-width: 120px; }
.clan-donate-btn.silver { border-color: rgba(220,200,140,.5); }
.clan-donate-btn.spirit { border-color: rgba(150,120,230,.5); }
.clan-donate-btn:hover { filter: brightness(1.2); }
.clan-donate-btn:disabled { opacity: .6; cursor: not-allowed; }
.cdb-icon { font-size: 18px; }
.cdb-name { color: #f5e6c8; font-size: 13px; font-weight: bold; }
.cdb-cost { color: #cbb489; font-size: 11px; }
.cdb-gain { color: #8bd08f; font-size: 10px; }

/* 帮派建筑 */
.clan-buildings-panel { display: flex; flex-direction: column; gap: 12px; }
.clan-buildings-head { display: flex; align-items: baseline; gap: 12px; }
.clan-buildings-title { color: #f5d98b; font-size: 16px; font-weight: bold; }
.clan-buildings-hint { color: #8b7355; font-size: 12px; }
.clan-buildings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.clan-building-card { display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,.04); border: 1px solid rgba(138,109,59,.4); border-radius: 12px; padding: 14px; position: relative; }
.clan-building-card.max { border-color: rgba(245,217,139,.6); }
.clan-building-icon { width: 72px; height: 72px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(138,109,59,.25), rgba(20,16,11,.4)); border: 1px solid rgba(138,109,59,.5); border-radius: 12px; overflow: hidden; }
.clan-building-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clan-building-info { flex: 1; min-width: 0; }
.clan-building-name { color: #f5d98b; font-size: 15px; font-weight: bold; }
.clan-building-lv { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.cbl-tag { background: rgba(184,134,11,.25); border: 1px solid rgba(245,217,139,.4); color: #ffd98b; padding: 1px 10px; border-radius: 12px; font-size: 12px; }
.cbl-max { color: #8bd08f; font-size: 12px; }
.clan-building-desc { color: #a8926a; font-size: 12px; line-height: 1.5; }
.clan-building-cost { display: flex; gap: 12px; margin-top: 6px; font-size: 11px; color: #cbb489; }
.clan-building-action { display: flex; flex-direction: column; align-items: center; gap: 6px; align-self: center; }
.clan-building-up-btn { background: linear-gradient(180deg, #b8860b, #8a5a00); border: 1px solid #f5d98b; color: #fff; font-size: 13px; font-weight: bold; padding: 7px 18px; border-radius: 9px; cursor: pointer; }
.clan-building-up-btn:hover { filter: brightness(1.15); }
.clan-building-up-btn:disabled { opacity: .55; cursor: not-allowed; }
.cba-tip { color: #8b7355; font-size: 11px; text-align: center; }

/* 帮派任务 */
.clan-tasks-panel { display: flex; flex-direction: column; gap: 16px; }
.clan-tasks-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.clan-tasks-title { color: #f5d98b; font-size: 16px; font-weight: bold; }
.clan-tasks-hint { color: #8b7355; font-size: 12px; }
.clan-tasks-section { display: flex; flex-direction: column; gap: 10px; }
.clan-tasks-section-title { color: #9fc9f0; font-size: 14px; font-weight: bold; border-left: 3px solid #b8860b; padding-left: 8px; }
.clan-tasks-list { display: flex; flex-direction: column; gap: 10px; }
.clan-task-item { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(138,109,59,.4); border-radius: 12px; padding: 12px 14px; }
.clan-task-item.done { opacity: .65; border-color: rgba(90,180,110,.5); }
.clan-task-icon { font-size: 22px; width: 32px; text-align: center; }
.clan-task-info { flex: 1; min-width: 0; }
.clan-task-name { color: #f5e6c8; font-size: 14px; font-weight: bold; }
.clan-task-desc { color: #a8926a; font-size: 12px; margin: 2px 0 6px; }
.clan-task-progress { display: flex; align-items: center; gap: 10px; max-width: 200px; }
.ctp-bar { flex: 1; height: 8px; background: rgba(255,255,255,.08); border-radius: 6px; overflow: hidden; }
.ctp-fill { height: 100%; background: linear-gradient(90deg, #b8860b, #f5d98b); border-radius: 6px; transition: width .3s; }
.ctp-text { color: #cbb489; font-size: 11px; min-width: 30px; text-align: right; }
.clan-task-reward { color: #8bd08f; font-size: 12px; white-space: nowrap; }
.clan-task-action { min-width: 62px; text-align: center; }
.clan-task-claim-btn { background: linear-gradient(180deg, #b8860b, #8a5a00); border: 1px solid #f5d98b; color: #fff; font-size: 12px; font-weight: bold; padding: 6px 14px; border-radius: 8px; cursor: pointer; }
.clan-task-claim-btn:hover { filter: brightness(1.15); }
.clan-task-claim-btn.disabled { opacity: .5; cursor: not-allowed; }
.cta-done { color: #8bd08f; font-size: 12px; }
.cta-locked { color: #8b7355; font-size: 12px; }
.clan-empty-tip { color: #8b7355; font-size: 13px; padding: 12px; text-align: center; }

/* 帮派里程碑 */
.clan-milestone-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.clan-milestone-item { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(138,109,59,.35); border-radius: 10px; padding: 10px 12px; }
.clan-milestone-item.done { opacity: .6; border-color: rgba(90,180,110,.5); }
.clan-milestone-item.ready { border-color: rgba(245,217,139,.7); background: rgba(184,134,11,.1); }
.clan-milestone-icon { font-size: 20px; }
.clan-milestone-info { flex: 1; min-width: 0; }
.clan-milestone-name { color: #f5e6c8; font-size: 13px; font-weight: bold; }
.clan-milestone-reward { color: #a8926a; font-size: 11px; margin-top: 3px; }
.clan-milestone-claim-btn { background: linear-gradient(180deg, #b8860b, #8a5a00); border: 1px solid #f5d98b; color: #fff; font-size: 12px; font-weight: bold; padding: 6px 14px; border-radius: 8px; cursor: pointer; }
.clan-milestone-claim-btn:hover { filter: brightness(1.15); }

/* 帮派商城 */
.clan-shop-panel { display: flex; flex-direction: column; gap: 12px; }
.clan-shop-head { display: flex; align-items: center; justify-content: space-between; }
.clan-shop-title { color: #f5d98b; font-size: 16px; font-weight: bold; }
.clan-shop-balance { color: #a8926a; font-size: 13px; }
.csb-num { color: #ffd98b; font-size: 15px; }
.clan-shop-hint { color: #8b7355; font-size: 12px; }
.clan-shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.clan-shop-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(138,109,59,.4); border-radius: 12px; padding: 14px 10px; transition: transform .15s; }
.clan-shop-card:hover { transform: translateY(-2px); }
.clan-shop-card.locked { opacity: .55; }
.clan-shop-card.green { border-color: rgba(90,200,120,.55); }
.clan-shop-card.blue { border-color: rgba(90,160,230,.55); }
.clan-shop-card.purple { border-color: rgba(180,110,230,.6); }
.clan-shop-card.orange { border-color: rgba(255,170,60,.7); }
.clan-shop-card.red { border-color: rgba(235,80,80,.75); }
.clan-shop-card.myth { border-color: rgba(255,215,0,.85); box-shadow: 0 0 14px rgba(255,215,0,.18); }
.clan-shop-lock { position: absolute; top: 8px; right: 8px; background: rgba(20,16,11,.85); border: 1px solid rgba(138,109,59,.5); color: #cbb489; font-size: 11px; padding: 2px 8px; border-radius: 8px; }
.clan-shop-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: rgba(20,16,11,.6); border: 1px solid rgba(138,109,59,.4); border-radius: 10px; overflow: hidden; }
.clan-shop-icon img { max-width: 90%; max-height: 90%; object-fit: contain; display: block; }
.clan-shop-name { color: #f5e6c8; font-size: 13px; font-weight: bold; text-align: center; }
.clan-shop-desc { color: #8b7355; font-size: 11px; text-align: center; min-height: 28px; line-height: 1.4; }
.clan-shop-cost { color: #ffd98b; font-size: 12px; }
.clan-shop-buy-btn { background: linear-gradient(180deg, #b8860b, #8a5a00); border: 1px solid #f5d98b; color: #fff; font-size: 12px; font-weight: bold; padding: 6px 20px; border-radius: 8px; cursor: pointer; width: 100%; }
.clan-shop-buy-btn:hover { filter: brightness(1.15); }
.clan-shop-buy-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 帮派神兽 */
.clan-beasts-panel { display: flex; flex-direction: column; gap: 14px; }
.clan-beasts-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.clan-beasts-title { color: #f5d98b; font-size: 16px; font-weight: bold; }
.clan-beasts-hint { color: #8b7355; font-size: 12px; }
.clan-beasts-total { display: flex; align-items: center; gap: 14px; background: linear-gradient(90deg, rgba(184,134,11,.2), rgba(184,134,11,.05)); border: 1px solid rgba(245,217,139,.45); border-radius: 10px; padding: 10px 14px; flex-wrap: wrap; }
.cbt-label { color: #ffd98b; font-size: 13px; font-weight: bold; }
.cbt-bonuses { display: flex; gap: 12px; flex-wrap: wrap; }
.cbt-b { font-size: 12px; color: #f5e6c8; }
.cbt-b.hp { color: #8bd08f; }
.cbt-b.atk { color: #f09d6b; }
.cbt-b.def { color: #7fc4e8; }
.cbt-b.crit { color: #e88bc8; }
.clan-beasts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.clan-beast-card { display: flex; gap: 12px; align-items: center; background: rgba(255,255,255,.04); border: 1px solid rgba(138,109,59,.4); border-radius: 12px; padding: 12px; }
.clan-beast-portrait { width: 84px; height: 84px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(184,134,11,.22), rgba(20,16,11,.45)); border: 1px solid rgba(245,217,139,.4); border-radius: 12px; overflow: hidden; }
.clan-beast-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clan-beast-info { flex: 1; min-width: 0; }
.clan-beast-name { color: #f5d98b; font-size: 15px; font-weight: bold; }
.clan-beast-desc { color: #a8926a; font-size: 11px; margin: 3px 0 6px; line-height: 1.4; }
.clan-beast-level { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.cblv-tag { background: rgba(184,134,11,.25); border: 1px solid rgba(245,217,139,.4); color: #ffd98b; padding: 1px 10px; border-radius: 12px; font-size: 12px; }
.cblv-max { color: #8bd08f; font-size: 11px; }
.clan-beast-bonus { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.cb-b { font-size: 11px; color: #f5e6c8; }
.cb-b.hp { color: #8bd08f; }
.cb-b.atk { color: #f09d6b; }
.cb-b.def { color: #7fc4e8; }
.cb-b.crit { color: #e88bc8; }
.clan-beast-cost { color: #cbb489; font-size: 11px; }
.clan-beast-action { display: flex; align-items: center; }
.clan-beast-feed-btn { background: linear-gradient(180deg, #b8860b, #8a5a00); border: 1px solid #f5d98b; color: #fff; font-size: 13px; font-weight: bold; padding: 8px 18px; border-radius: 9px; cursor: pointer; }
.clan-beast-feed-btn:hover { filter: brightness(1.15); }
.clan-beast-feed-btn:disabled { opacity: .55; cursor: not-allowed; }
.cba-locked { color: #8b7355; font-size: 11px; text-align: center; }

/* ===== 帮派职位管理 ===== */
.clan-pos-tag.leader { background: rgba(255,193,7,.22); border-color: rgba(255,193,7,.65); color: #ffd54f; }
.clan-pos-tag.vice { background: rgba(171,71,188,.22); border-color: rgba(171,71,188,.6); color: #ce93d8; }
.clan-pos-tag.elder { background: rgba(66,165,245,.2); border-color: rgba(66,165,245,.55); color: #90caf9; }
.cm-col-op { flex: 0 0 260px; display: flex; gap: 6px; justify-content: flex-end; }
.clan-op-btn { padding: 3px 10px; border-radius: 10px; border: 1px solid rgba(138,109,59,.45); background: rgba(138,109,59,.18); color: #dcc9a0; font-size: 11px; cursor: pointer; transition: all .15s; }
.clan-op-btn:hover { background: rgba(255,213,79,.22); border-color: rgba(255,213,79,.6); color: #ffe082; }
.clan-op-btn:disabled { opacity: .45; cursor: not-allowed; }
.clan-op-btn.appoint { border-color: rgba(102,187,106,.45); background: rgba(102,187,106,.12); color: #a5d6a7; }
.clan-op-btn.appoint:hover { background: rgba(102,187,106,.28); color: #c8e6c9; }
.clan-op-btn.demote { border-color: rgba(255,167,38,.45); background: rgba(255,167,38,.1); color: #ffcc80; }
.clan-op-btn.kick { border-color: rgba(239,83,80,.5); background: rgba(239,83,80,.12); color: #ef9a9a; }
.clan-op-btn.kick:hover { background: rgba(239,83,80,.3); color: #ffcdd2; }

/* 称号图标 */
.title-card-body { display: flex; gap: 12px; align-items: flex-start; }
.title-card-icon { width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0; object-fit: cover; border: 1px solid rgba(255,255,255,0.2); }
.title-card-info { flex: 1; min-width: 0; }

/* 在线玩家卡片v4 */
.op-card-head-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.op-card-name-row { display:flex; align-items:center; gap:6px; }
.op-card-realm-row { display:flex; }
.op-card-realm { font-size:11px; color:#8a9ab8; opacity:.9; }
.op-card-title { display:inline-flex; align-items:center; gap:4px; }
.op-card-title-icon { width:18px; height:18px; border-radius:3px; object-fit:cover; }

/* ===== 坐骑宠物弹窗布局优化 - 解决挤压问题 ===== */
.pet-modal, .mount-modal {
  width: 1150px !important;
  height: 700px !important;
  max-width: 96vw !important;
  max-height: 94vh !important;
}

.pet-body, .mount-body {
  gap: 16px !important;
  padding: 16px !important;
}

.pet-portrait-area, .mount-portrait-area {
  width: 280px !important;
  flex-shrink: 0 !important;
}

.pet-right-area, .mount-right-area {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.pet-grid, .mount-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

.pet-item, .mount-item {
  padding: 12px 8px !important;
}

.pet-item-icon img, .mount-item-icon img {
  width: 48px !important;
  height: 48px !important;
}

.pet-detail-panel, .mount-detail-panel {
  padding: 16px !important;
  gap: 12px !important;
}

.pet-action-btn, .mount-action-btn {
  padding: 12px !important;
  font-size: 13px !important;
  white-space: normal !important;
  line-height: 1.4 !important;
}

.pet-filter-bar, .mount-filter-bar {
  gap: 8px !important;
  padding: 8px !important;
}

.pet-filter-item, .mount-filter-item {
  padding: 6px 12px !important;
  font-size: 13px !important;
}

/* ===== 坐骑宠物弹窗详情面板紧凑优化 ===== */
.pet-detail-panel, .mount-detail-panel {
  padding: 12px !important;
  gap: 8px !important;
  width: 260px !important;
  flex-shrink: 0 !important;
}

.pet-detail-head, .mount-detail-head {
  gap: 6px !important;
}

.pet-detail-title h3, .mount-detail-title h3 {
  font-size: 15px !important;
  margin: 0 !important;
}

.pet-detail-desc, .mount-detail-desc {
  font-size: 11px !important;
  line-height: 1.4 !important;
  padding: 6px !important;
}

.pet-detail-stats, .mount-detail-stats {
  gap: 4px !important;
}

.pet-detail-stat-row, .mount-detail-stat-row {
  padding: 3px 6px !important;
  font-size: 12px !important;
}

.pet-detail-skill, .mount-detail-skill {
  padding: 8px !important;
  gap: 4px !important;
}

.pet-detail-skill-title, .mount-detail-skill-title {
  font-size: 12px !important;
}

.pet-skill-name, .mount-skill-name {
  font-size: 12px !important;
}

.pet-skill-desc, .mount-skill-desc {
  font-size: 11px !important;
}

.pet-detail-skill-effect, .mount-detail-skill-effect {
  font-size: 11px !important;
}

.pet-portrait-area, .mount-portrait-area {
  width: 240px !important;
}

.pet-portrait-img, .mount-portrait-img {
}


.section-title{font-size:64px !important;letter-spacing:10px !important;}
.feature-card-img{height:320px !important;}
.feature-card-img img{object-fit:cover !important;}

.section-title{font-size:72px !important;color:#222 !important;font-weight:bold !important;letter-spacing:15px !important;}
.feature-card-img{background:#111 !important;}
.feature-card-img img{object-fit:cover !important;width:100%;height:100%;}

.sect-card-portrait img {
  mix-blend-mode: multiply;
}

.sect-card-portrait {
  background: transparent !important;
  box-shadow: none !important;
}

.sect-card-portrait {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.sect-card-portrait img {
  mix-blend-mode: multiply !important;
  filter: none !important;
}

.sect-card-portrait {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.sect-card-portrait img {
  mix-blend-mode: multiply !important;
  filter: none !important;
  box-shadow: none !important;
}

.sect-card-portrait img:first-child {
  mix-blend-mode: multiply !important;
  filter: none !important;
}

.sect-card-portrait img {
  mix-blend-mode: multiply !important;
  background: transparent !important;
}

.section-title { color: #d4a04a !important; }
body { overflow-x: hidden; }


/* ===== 打造页 ===== */
.forge-craft-wrap { display:flex !important; flex-direction:row !important; height:100% !important; gap:8px !important; min-width:0 !important; }
.forge-craft-side { flex:0 0 118px !important; display:flex !important; flex-direction:column !important; gap:4px !important; overflow-y:auto !important; padding:4px !important; }
.forge-craft-tab { padding:6px 8px !important; border-radius:6px !important; background:rgba(80,50,20,.4) !important; color:#d4a04a !important; cursor:pointer !important; font-size:12px !important; border:1px solid rgba(212,160,74,.3) !important; text-align:center !important; white-space:nowrap !important; }
.forge-craft-tab:hover { color:#ffd76a !important; }
.forge-craft-tab.active { background:linear-gradient(135deg,#a06a20,#d4a04a) !important; color:#1a0f05 !important; font-weight:bold !important; }
.forge-craft-main { flex:1 !important; display:flex !important; gap:6px !important; min-width:0 !important; min-height:0 !important; }
.forge-craft-left { flex:0 0 128px !important; overflow-y:auto !important; padding:6px !important; background:rgba(0,0,0,.25) !important; border-radius:8px !important; }
.forge-craft-center { flex:1 !important; min-width:0 !important; overflow-y:auto !important; padding:6px !important; background:rgba(0,0,0,.25) !important; border-radius:8px !important; }
.forge-craft-right { flex:0 0 132px !important; padding:6px !important; background:rgba(0,0,0,.25) !important; border-radius:8px !important; }
.craft-slot-grid { display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:5px !important; }
.craft-slot-item { flex-direction:column !important; padding:6px 2px !important; }
.forge-craft-cost { display:flex !important; flex-direction:column !important; gap:4px !important; margin-top:8px !important; }
.forge-craft-cost-row { display:flex !important; justify-content:space-between !important; padding:3px 5px !important; background:rgba(0,0,0,.2) !important; border-radius:4px !important; font-size:12px !important; }
.forge-craft-cost-row .ok { color:#7dff7d !important; }
.forge-craft-cost-row .lack { color:#ff6b6b !important; }
.forge-craft-preview { margin-top:10px !important; border-top:1px solid rgba(212,160,74,.3) !important; padding-top:8px !important; }
.forge-craft-preview-row { display:flex !important; align-items:center !important; gap:8px !important; }
.forge-craft-preview-img { width:44px !important; height:44px !important; object-fit:contain !important; }
.forge-craft-preview-name { font-size:14px !important; font-weight:bold !important; }
.forge-craft-preview-attr { font-size:12px !important; color:#c9b89a !important; margin-top:2px !important; }
.forge-craft-actions { display:flex !important; flex-direction:column !important; gap:8px !important; }
.forge-craft-msg { font-size:12px !important; color:#ffd76a !important; text-align:center !important; }

/* ===== 副本弹窗文字大小修正 (20261011) ===== */
.dungeon-modal-new .section-title { font-size: 14px !important; letter-spacing: 0 !important; line-height: 1.6 !important; }
.dungeon-modal-new .panel-title { font-size: 16px; }
.dungeon-modal-new .dungeon-card-name { font-size: 15px; }
.dungeon-modal-new .dungeon-card-level,
.dungeon-modal-new .dungeon-card-count { font-size: 13px; }
.dungeon-modal-new .dungeon-card-status { font-size: 12px; }
.dungeon-modal-new .dungeon-first-tag { font-size: 11px; }
.dungeon-modal-new .dungeon-detail-desc { font-size: 13.5px; }
.dungeon-modal-new .dungeon-stage-name { font-size: 14px; }
.dungeon-modal-new .dungeon-stage-monster { font-size: 13px; }
.dungeon-modal-new .boss-tag { font-size: 11px; }
.dungeon-modal-new .drop-item-name { font-size: 13px; }
.dungeon-modal-new .drop-item-count { font-size: 13px; }
.dungeon-modal-new .power-label,
.dungeon-modal-new .power-val { font-size: 13.5px; }
.dungeon-modal-new .power-compare-tip { font-size: 13px; }
.dungeon-modal-new .reward-name { font-size: 13px; }
.dungeon-modal-new .reward-count { font-size: 13.5px; }
.dungeon-modal-new .info-label,
.dungeon-modal-new .info-val { font-size: 13px; }

/* ===== 游戏设置弹窗 ===== */
.settings-modal-overlay {
  position: fixed !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  background: rgba(20, 10, 5, 0.55) !important;
  z-index: 9999 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.settings-modal {
  width: 420px !important; max-width: 92vw !important;
  background: linear-gradient(180deg, #f5ecd7 0%, #e9dcc0 100%) !important;
  border: 2px solid #8b6914 !important; border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 0 40px rgba(139,105,20,0.08) !important;
  overflow: hidden !important;
  font-family: 'ZCOOL XiaoWei', 'Ma Shan Zheng', serif !important;
}
.settings-title {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 12px 18px !important;
  background: linear-gradient(90deg, #8b6914, #a8842a) !important;
  color: #fff !important; font-size: 17px !important; letter-spacing: 2px !important;
  border-bottom: 2px solid #6b4e10 !important;
}
.settings-close {
  background: none !important; border: none !important; color: #fff !important;
  font-size: 20px !important; cursor: pointer !important; line-height: 1 !important;
  padding: 0 4px !important;
}
.settings-close:hover { color: #ffd9a0 !important; }
.settings-body { padding: 8px 18px 12px !important; }
.settings-footer {
  padding: 12px 18px !important; text-align: right !important;
  border-top: 1px solid rgba(139,105,60,0.3) !important;
}
.settings-footer-btn {
  padding: 7px 26px !important; font-size: 15px !important;
  background: linear-gradient(180deg, #a8842a, #8b6914) !important;
  color: #fff !important; border: 1px solid #6b4e10 !important; border-radius: 8px !important;
  cursor: pointer !important; letter-spacing: 2px !important;
}
.settings-footer-btn:hover { background: linear-gradient(180deg, #b8953a, #9a7a1e) !important; }


/* 弹窗超高保护：内容过多时内部滚动，避免显示不全 */
.pd-modal-scroll { max-height: 90vh !important; overflow-y: auto !important; }

/* 个人信息弹窗超高保护：内容过多时内部滚动，避免显示不全 */
.pi-modal { overflow-y: auto !important; overflow-x: hidden !important; }

/* ===== 底部栏完整显示保护 zoom9b =====
   聊天消息区必须可收缩(min-height:0)，否则内容超高会把底栏挤出可视区，
   导致底栏只显示上半截、下半截被浏览器任务栏遮住 */
.game-main { min-height: 0 !important; }
.chat-container { min-height: 0 !important; height: 100% !important; max-height: 100% !important; }
.chat-channels { flex-shrink: 0 !important; min-height: 41px !important; }
.chat-messages, .chat-messages-inner, .chat-scroll-area { min-height: 0 !important; flex-shrink: 1 !important; }
.scroll-bottom-bar { flex-shrink: 0 !important; min-height: 130px !important; max-height: 130px !important; }
/* ===== 切磋战帖弹窗（暗金增强 v2）===== */
.challenge-modal.challenge-modal-theme {
  position: relative;
  width: 340px;
  background: linear-gradient(160deg, #2c1d0d 0%, #160e06 55%, #241708 100%);
  border: 1px solid #d4a04a;
  border-radius: 12px;
  padding: 22px 24px 20px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 18px 50px rgba(0,0,0,.75), inset 0 0 40px rgba(212,160,74,.06);
}
.challenge-corner { position: absolute; width: 18px; height: 18px; border: 2px solid #d4a04a; pointer-events: none; }
.challenge-corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; border-top-left-radius: 12px; }
.challenge-corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; border-top-right-radius: 12px; }
.challenge-corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; border-bottom-left-radius: 12px; }
.challenge-corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; border-bottom-right-radius: 12px; }
.challenge-modal.challenge-modal-theme .challenge-modal-title { text-align: center; font-size: 22px; letter-spacing: 8px; color: #f0c86a; text-shadow: 0 0 12px rgba(212,160,74,.5); margin-bottom: 14px; }
.challenge-inviter { display: flex; gap: 14px; align-items: center; background: rgba(0,0,0,.3); border: 1px solid rgba(212,160,74,.25); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.challenge-avatar { flex-shrink: 0; }
.challenge-name { font-size: 17px; font-weight: 700; color: #f0e0c0; letter-spacing: 2px; margin-bottom: 4px; font-family: "STKaiti", "KaiTi", serif; }
.challenge-meta { font-size: 12px; color: #cbbf9f; line-height: 1.8; font-family: "STKaiti", "KaiTi", serif; }
.challenge-modal.challenge-modal-theme .challenge-modal-text { text-align: center; font-size: 14px; color: #e8dcc0; line-height: 1.8; margin-bottom: 14px; letter-spacing: 1px; }
.challenge-countdown { position: relative; height: 8px; background: rgba(0,0,0,.4); border: 1px solid rgba(212,160,74,.35); border-radius: 4px; margin-bottom: 16px; }
.challenge-countdown-bar { height: 100%; background: linear-gradient(90deg, #d4a04a, #f0c86a); border-radius: 4px; transition: width 1s linear; }
.challenge-countdown-num { position: absolute; top: -16px; right: 0; font-size: 11px; color: #9c8f72; }
.challenge-modal.challenge-modal-theme .challenge-modal-btn.accept { background: linear-gradient(180deg, #e8c47a, #c9963e); color: #2a1c08; border: 1px solid #f0d494; }
.challenge-modal.challenge-modal-theme .challenge-modal-btn.refuse { background: rgba(255,255,255,.06); color: #b8a98a; border: 1px solid rgba(184,169,138,.35); }

/* ===== 切磋结果弹窗（暗金增强 v2）===== */
.pvp-modal.pvp-modal-theme { width: 440px; background: linear-gradient(160deg, #2c1d0d 0%, #160e06 55%, #241708 100%); border: 1px solid #d4a04a; box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 18px 50px rgba(0,0,0,.75), inset 0 0 40px rgba(212,160,74,.06); }
.pvp-modal.pvp-t-win { border-color: #e8c47a; }
.pvp-modal.pvp-t-lose { border-color: #a04838; }
.pvp-modal.pvp-t-draw { border-color: #c9c9a0; }
.pvp-result-big { font-size: 18px; padding: 10px; letter-spacing: 2px; }
.pvp-result-big.win { background: linear-gradient(135deg, rgba(212,160,74,.28), rgba(240,200,106,.12)); color: #ffd98a; border: 1px solid rgba(232,196,122,.5); text-shadow: 0 0 12px rgba(240,200,106,.4); }
.pvp-result-big.lose { background: linear-gradient(135deg, rgba(160,72,56,.25), rgba(120,40,30,.1)); color: #f0957a; border: 1px solid rgba(224,120,96,.45); }
.pvp-result-big.draw { background: linear-gradient(135deg, rgba(200,200,160,.14), rgba(200,200,160,.06)); color: #e8e0b8; border: 1px solid rgba(220,220,170,.35); }
.pvp-score-change { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; background: rgba(0,0,0,.28); border-radius: 6px; padding: 7px; margin-bottom: 10px; font-size: 13px; }
.pvp-score-num.up { color: #7ed68a; }
.pvp-score-num.down { color: #f0957a; }
.pvp-rank-delta { font-size: 12px; padding: 1px 8px; border-radius: 4px; font-weight: 700; }
.pvp-rank-delta.up { color: #7ed68a; background: rgba(76,175,80,.15); }
.pvp-rank-delta.down { color: #f0957a; background: rgba(231,76,60,.15); }
.pvp-record { text-align: center; font-size: 12px; color: #cbbf9f; margin-bottom: 10px; line-height: 1.8; }
.pvp-modal-foot { display: flex; gap: 10px; margin: 0 16px 16px; }
.pvp-modal-foot .pvp-modal-btn { flex: 1; margin: 0; }
.pvp-modal-btn.rematch { background: linear-gradient(180deg, #8e6c3c, #6b4e26); color: #f0e0c0; border: 1px solid #b08a4a; }
/* ===== PVP 战斗回放动画（PvpModal v3） ===== */
.pvp-replay-modal .pvp-modal-body { padding: 10px 14px 14px; }
.pvp-replay-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pvp-replay-round { color: #e8c875; font-weight: 700; font-size: 13px; letter-spacing: 1px; }
.pvp-replay-tip { color: #c9b48a; font-size: 12px; }
.pvp-replay-skip { background: rgba(140,110,60,.25); color: #e8c875; border: 1px solid #a0865a; border-radius: 4px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.pvp-replay-skip:hover { background: rgba(200,160,80,.35); }
.pvp-arena-replay { position: relative; }
.pvp-hpbar { height: 8px; background: rgba(0,0,0,.45); border: 1px solid rgba(160,130,70,.5); border-radius: 4px; margin-top: 6px; overflow: hidden; }
.pvp-hpbar-fill { height: 100%; background: linear-gradient(90deg, #b85454, #e07060); border-radius: 3px; transition: width .55s ease; }
.pvp-hpbar-fill.empty { background: #5a5a5a; }
.pvp-replay-log { min-height: 44px; margin-top: 10px; padding: 8px 10px; background: rgba(0,0,0,.35); border: 1px solid rgba(160,130,70,.4); border-radius: 6px; font-size: 13px; color: #e6d9b8; line-height: 1.5; }
.pvp-replay-log .side-a { color: #f0c060; }
.pvp-replay-log .side-d { color: #7fb8e8; }
.pvp-replay-log .side-s { color: #c9b48a; }
.pvp-replay-progress { height: 5px; margin-top: 10px; background: rgba(0,0,0,.4); border-radius: 3px; overflow: hidden; }
.pvp-replay-progress-bar { height: 100%; background: linear-gradient(90deg, #8e6c3c, #e8c875); border-radius: 3px; transition: width .55s ease; }
/* ===== P2 擂台匹配弹窗 ===== */
.arena-matching-overlay { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.65); backdrop-filter: blur(3px); }
.arena-matching-modal { width: 320px; padding: 26px 20px 20px; border-radius: 12px; background: linear-gradient(160deg, #1c1510, #2a2015); border: 1px solid rgba(212,160,74,.5); box-shadow: 0 0 30px rgba(212,160,74,.25); text-align: center; }
.arena-matching-icon { font-size: 42px; margin-bottom: 10px; animation: arena-pulse 1.2s ease-in-out infinite; }
.arena-matching-title { font-size: 18px; color: #e8c875; font-weight: bold; letter-spacing: 2px; margin-bottom: 6px; }
.arena-matching-desc { font-size: 12px; color: #b8a27c; margin-bottom: 16px; }
.arena-matching-spinner { width: 40px; height: 40px; margin: 0 auto 16px; border: 3px solid rgba(212,160,74,.2); border-top-color: #e8c875; border-radius: 50%; animation: arena-spin 1s linear infinite; }
@keyframes arena-spin { to { transform: rotate(360deg); } }
@keyframes arena-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ===== P2 个人战绩弹窗 ===== */
.pvp-history-overlay { position: fixed; inset: 0; z-index: 3999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
.pvp-history-modal { width: 560px; max-width: 92vw; max-height: 82vh; display: flex; flex-direction: column; }
.pvp-history-body { padding: 12px 16px; overflow-y: auto; flex: 1; }
.pvp-history-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 12px; }
.ph-stat { background: rgba(0,0,0,.35); border: 1px solid rgba(160,130,70,.35); border-radius: 8px; padding: 8px 4px; text-align: center; }
.ph-stat.ph-rank { background: linear-gradient(160deg, rgba(212,160,74,.25), rgba(0,0,0,.35)); }
.ph-stat-val { font-size: 18px; font-weight: bold; color: #e8c875; }
.ph-stat-val.win { color: #7dd98a; }
.ph-stat-val.lose { color: #e07b6b; }
.ph-stat-val.streak { color: #f0a050; }
.ph-stat-label { font-size: 11px; color: #a89060; margin-top: 3px; }
.pvp-history-list-header { display: flex; padding: 6px 10px; background: rgba(212,160,74,.15); border: 1px solid rgba(212,160,74,.35); border-radius: 6px 6px 0 0; font-size: 12px; color: #d4a04a; font-weight: bold; }
.pvp-history-list { border: 1px solid rgba(160,130,70,.3); border-top: none; border-radius: 0 0 6px 6px; max-height: 46vh; overflow-y: auto; }
.pvp-history-item { display: flex; align-items: center; padding: 8px 10px; border-bottom: 1px solid rgba(160,130,70,.15); font-size: 13px; color: #e6d9b8; }
.pvp-history-item:last-child { border-bottom: none; }
.pvp-history-item:hover { background: rgba(212,160,74,.08); }
.ph-col-time { width: 16%; }
.ph-col-mode { width: 14%; color: #d4a04a; }
.ph-col-opp { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-col-res { width: 12%; }
.ph-col-score { width: 18%; text-align: right; }
.ph-res { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 12px; }
.ph-res.win { background: rgba(80,180,100,.2); color: #7dd98a; }
.ph-res.lose { background: rgba(220,100,90,.2); color: #e07b6b; }
.ph-res.draw { background: rgba(200,170,100,.2); color: #c9b48a; }
.ph-col-score.up { color: #7dd98a; }
.ph-col-score.down { color: #e07b6b; }
.ph-score-after { font-size: 11px; color: #a89060; margin-left: 4px; }
.pvp-history-empty { padding: 30px 10px; text-align: center; color: #a89060; font-size: 13px; }

/* ===== P2 段位称号 ===== */
.pvp-rank-title { margin-left: 6px; font-size: 11px; color: #f0c060; font-style: italic; }
.pvp-rank-name { color: #e8c875; font-weight: bold; }
.pvp-title-val { margin-left: 6px; font-size: 12px; color: #f0c060; font-style: italic; }
.pvp-arena-tip { text-align: center; font-size: 12px; color: #a89060; margin: -4px 0 8px; }
.detail-btn.arena { background: linear-gradient(160deg, #8e6c3c, #6b4e28); border-color: #e8c875; color: #ffe9b0; }
.detail-btn.history { background: rgba(40,30,20,.5); border-color: #8a6f45; }

/* ===== P2 段位头像框（0无名~6武圣） ===== */
.pvp-frame-0 { border: 2px solid #5a5348 !important; }
.pvp-frame-1 { border: 2px solid #a0773c !important; box-shadow: 0 0 4px rgba(160,119,60,.4); }
.pvp-frame-2 { border: 2px solid #b8b8b8 !important; box-shadow: 0 0 5px rgba(200,200,200,.4); }
.pvp-frame-3 { border: 2px solid #e8c875 !important; box-shadow: 0 0 6px rgba(232,200,117,.5); }
.pvp-frame-4 { border: 2px solid #f0a050 !important; box-shadow: 0 0 8px rgba(240,160,80,.55); }
.pvp-frame-5 { border: 2px solid #c77bff !important; box-shadow: 0 0 10px rgba(199,123,255,.55); }
.pvp-frame-6 { border: 2px solid #ffd75e !important; box-shadow: 0 0 14px rgba(255,215,94,.7), inset 0 0 6px rgba(255,215,94,.3); }
.rank-avatar-char { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(160deg, #3a2c1a, #1c1510); color: #e8c875; font-size: 14px; }
/* ===== P2 排行榜顶部战绩入口 ===== */
.ranking-history-btn { margin-left: 10px; padding: 2px 10px; font-size: 12px; background: linear-gradient(160deg, #8e6c3c, #6b4e28); border: 1px solid #e8c875; color: #ffe9b0; border-radius: 4px; cursor: pointer; }
.ranking-history-btn:hover { filter: brightness(1.15); }
.podium-item { cursor: pointer; }
.podium-item:hover { filter: brightness(1.1); }


/* ===== 聊天大厅玩法条（诛邪·红包·对赌） ===== */
.chat-event-playbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(139,115,85,0.10); border-bottom: 1px solid rgba(139,115,85,0.25); }
.chat-event-card { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 150px; padding: 6px 8px; border: 1px solid rgba(139,115,85,0.4); border-radius: 6px; background: rgba(20,16,10,0.55); }
.chat-event-card-head { display: flex; align-items: center; gap: 6px; }
.chat-event-badge { font-size: 10px; color: #fff; background: #8b4513; padding: 1px 5px; border-radius: 3px; line-height: 14px; }
.chat-event-card.redpacket .chat-event-badge { background: #b8860b; }
.chat-event-card.gamble .chat-event-badge { background: #4a4a8a; }
.chat-event-name { font-size: 12px; color: #e8d9b8; font-weight: bold; }
.chat-event-sub { font-size: 11px; color: #a08c6a; }
.chat-event-hpbar { position: relative; height: 14px; background: #3a2e20; border-radius: 7px; overflow: hidden; }
.chat-event-hpbar-fill { height: 100%; background: linear-gradient(90deg, #8b0000, #dc143c); border-radius: 7px; }
.chat-event-hptext { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-size: 10px; color: #fff; line-height: 14px; }
.chat-event-btn { font-size: 12px; padding: 3px 12px; border: 1px solid #8b7355; background: #5d4037; color: #f0e6d2; border-radius: 4px; cursor: pointer; }
.chat-event-btn:hover { background: #7a5a45; }
.chat-event-btn.ghost { background: transparent; }
.chat-event-refresh { font-size: 14px; color: #a08c6a; background: none; border: none; cursor: pointer; margin-left: auto; }
.chat-event-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; display: flex; flex-direction: column; gap: 6px; width: 220px; padding: 10px; background: #241a10; border: 1px solid #8b7355; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.6); }
.chat-event-input { font-size: 12px; padding: 5px 8px; background: #14100a; color: #f0e6d2; border: 1px solid #6a5740; border-radius: 4px; outline: none; }
.chat-event-input:focus { border-color: #c8763a; }
.chat-event-pop-title { font-size: 13px; color: #e8d9b8; font-weight: bold; }
.chat-event-pop-actions { display: flex; gap: 6px; justify-content: flex-end; }
.chat-event-pop-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-event-opt { font-size: 12px; padding: 3px 10px; background: #14100a; color: #cbb08a; border: 1px solid #6a5740; border-radius: 4px; cursor: pointer; }
.chat-event-opt.active { background: #8b4513; color: #fff; border-color: #c8763a; }