/* pages/point-simulator/point-simulator.wxss */
/* 添加页面全局背景色，确保与主页一致 */
.point-simulator-app {
  background-color: #221a18;
}

.page-container {
  background: radial-gradient(ellipse at top, #2a201d, #221a18);
  min-height: 100vh;
  color: #F5F5F7;
  padding-bottom: 50px; /* 增加底部内边距 */
}

.content-container {
  padding: 15px 15px 40px 15px; /* 增加底部内边距 */
}

/* 步骤指示器 */
.steps-indicator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.step {
  font-size: 14px;
  color: #a0a0a0;
  padding: 5px 10px;
  border-radius: 10px;
}

.step.active {
  color: #daa520;
  background-color: rgba(218, 165, 32, 0.1);
  font-weight: bold;
}

.step-divider {
  flex: 1;
  height: 1px;
  background-color: #3d3332;
  margin: 0 5px;
}

/* 内容区域 */
.step-content {
  background-color: rgba(61, 48, 44, 0.75);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 300px;
}

/* 为第三步（升级点数）设置更大的最小高度 */
.step-content:nth-of-type(3) {
  min-height: 400px; /* 进一步增加高度 */
  padding-bottom: 20px; /* 确保底部有足够的空间 */
}

.step-title {
  font-size: 18px;
  color: #daa520;
  text-align: center;
  margin-bottom: 20px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  flex-wrap: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
}

/* 导航按钮 */
.nav-buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  padding: 0 10px 20px 10px; /* 增加底部内边距 */
  position: relative; /* 确保按钮位置相对于容器 */
  z-index: 10; /* 确保按钮在最上层 */
}

.prev-btn, .next-btn, .save-btn {
  width: 40%;
  background: linear-gradient(135deg, #3e2b28, #2a1f1e);
  color: #F5F5F7;
  border: 1px solid #daa520;
  border-radius: 4px;
  font-size: 14px;
  height: 40px; /* 固定高度 */
  line-height: 40px; /* 行高与高度一致，确保文字垂直居中 */
  text-align: center; /* 确保文字水平居中 */
  box-sizing: border-box; /* 确保边框计入宽高 */
}

.save-btn {
  width: 90%;
  margin: 0 auto;
  background: linear-gradient(135deg, #3e2b28, #2a1f1e);
  color: #F5F5F7;
  font-weight: normal;
}

.save-btn.next-btn-highlight {
  background: linear-gradient(135deg, #e6b325, #c99420);
  color: #221a18;
  font-weight: bold;
  border: 1px solid #ffcc00;
  box-shadow: 0 0 7.5px rgba(218, 165, 32, 0.6);
  transform: scale(1.02);
}

/* 职业选择样式 */
.class-selection {
  display: flex;
  flex-direction: column;
}

.class-display {
  text-align: center;
  margin-bottom: 15px;
  height: 300px;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
}

.class-image {
  width: 200%;
  height: 200%;
  object-fit: cover;
  position: absolute;
  left: -50%;
  top: 0;
  transform-origin: top center;
}

.class-name {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  font-size: 24px;
  color: #ffffff;
  padding: 7.5px;
  text-shadow: 
    0 0 1px #daa520,
    0 0 2px #daa520,
    0 0 3px #daa520,
    0 0 4px #e6b325,
    0 2px 4px rgba(0, 0, 0, 0.9);
  font-weight: 800;
  letter-spacing: 2px;
  -webkit-text-stroke: 0.5px #daa520;
}

.title-container {
  display: inline-flex;
  align-items: baseline;
  height: 25px;
  line-height: 25px;
}

.class-name-highlight {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 0 0 5px #daa520, 0 0 7.5px #daa520;
  margin-right: 7.5px;
  display: inline-block;
  height: 25px;
  line-height: 25px;
}

/* 属性条样式 */
.attributes {
  margin-bottom: 15px;
}

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

.attribute-name {
  width: 90px;
  font-size: 14px;
  color: #F5F5F7;
}

.attribute-bar {
  flex: 1;
  height: 10px;
  background-color: #3d3332;
  border-radius: 5px;
  overflow: hidden;
}

.attribute-fill {
  height: 100%;
  background: linear-gradient(to right, #e6b325, #daa520);
  border-radius: 5px;
}

/* 职业选择按钮 */
.class-buttons {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
  flex-wrap: nowrap;
  width: 100%;
}

.class-button {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #3d3332;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #3d3332;
  overflow: hidden;
  margin: 0 2.5px;
}

.class-button.active {
  border: 1px solid #daa520;
  box-shadow: 0 0 7.5px rgba(218, 165, 32, 0.6);
}

.class-button image {
  width: 90%;
  height: 90%;
}

.class-button.active image {
  filter: sepia(100%) saturate(800%) hue-rotate(0deg) brightness(120%) contrast(120%);
  /* 这个组合会产生更明显的金色效果 */
}

/* 性别选择 */
.gender-selection {
  display: flex;
  justify-content: center;
  margin: 15px 0;
}

.gender-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #3d3332;
  margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #3d3332;
}

.gender-button.active {
  border: 1px solid #daa520;
  box-shadow: 0 0 7.5px rgba(218, 165, 32, 0.6);
}

.gender-icon {
  font-size: 24px;
  color: #F5F5F7;
}

/* 初始点数配置样式 */
.point-title {
  font-size: 18px;
  color: #daa520;
  text-align: center;
  margin-bottom: 20px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
}

.point-title text {
  display: inline-block;
  height: 25px;
  line-height: 25px;
}

.point-allocation {
  padding: 10px;
}

.point-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 5px 0;
}

.point-name {
  font-size: 18px;
  color: #daa520;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  width: 75px;
  margin-left: 5px;
}

.point-control {
  display: flex;
  align-items: center;
}

.point-btn {
  width: 40px;
  height: 40px;
  background-color: rgba(50, 45, 40, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #daa520;
  border: 1px solid rgba(218, 165, 32, 0.5);
  border-radius: 4px;
  transition: all 0.2s;
}

.point-btn:active {
  transform: scale(0.95);
  background-color: rgba(70, 60, 55, 0.9);
}

.point-btn.disabled {
  opacity: 0.5;
  color: #7a7a7a;
}

.point-value {
  width: 100px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.6);
  margin: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: white;
  border-radius: 4px;
}

.remaining-points {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
  padding: 10px;
}

.remaining-points text {
  font-size: 18px;
  color: #daa520;
  margin-right: 10px;
}

.points-value {
  width: 60px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: white;
  border-radius: 4px;
  margin-right: 10px;
}

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

.reset-btn {
  width: 35px;
  height: 35px;
  background: linear-gradient(135deg, #3e2b28, #2a1f1e);
  border: 1px solid #daa520;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: all 0.3s;
}

.reset-btn.active-btn {
  opacity: 0.8;
  transform: scale(0.9);
  background: linear-gradient(135deg, #daa520, #b08319);
  border: 1px solid #ffcc00;
}

.reset-icon {
  width: 16px;
  height: 16px;
}

.rotating {
  animation: rotate 0.8s ease-in-out;
}

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

.reset-btn image {
  filter: invert(100%) brightness(200%) contrast(100%);
}

.title-separator {
  margin: 0 5px;
  color: #a0a0a0;
  line-height: 1;
  vertical-align: middle;
}

.next-btn-highlight {
  background: linear-gradient(135deg, #e6b325, #c99420);
  color: #221a18;
  font-weight: bold;
  border: 1px solid #ffcc00;
  box-shadow: 0 0 7.5px rgba(218, 165, 32, 0.6);
  transform: scale(1.02);
}

.selection-guide {
  position: relative;
  border: 2px dashed #ff4d4f;
  border-radius: 8px;
  padding: 7.5px 2.5px;
  animation: pulse 1.5s infinite alternate;
  box-shadow: 0 0 7.5px rgba(255, 77, 79, 0.3);
}

.selection-guide::before {
  content: "请选择职业";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ff4d4f;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 5px rgba(255, 77, 79, 0.3);
  }
  100% {
    box-shadow: 0 0 10px rgba(255, 77, 79, 0.7);
  }
}

/* 添加在CSS文件末尾，确保覆盖前面的样式 */
.prev-btn, .next-btn {
  width: 30% !important; /* 使用!important确保覆盖 */
}

@keyframes increase-animation {
  0% { color: white; }
  50% { color: #4CAF50; font-size: 24px; }
  100% { color: white; }
}

@keyframes decrease-animation {
  0% { color: white; }
  50% { color: #F44336; font-size: 24px; }
  100% { color: white; }
}

.increase-effect {
  animation: increase-animation 0.6s ease;
}

.decrease-effect {
  animation: decrease-animation 0.6s ease;
}

/* 添加属性奖励侧边栏样式 */
.point-allocation-container {
  display: flex;
  justify-content: space-between;
}

.point-allocation {
  flex: 1;
  padding: 10px;
}

.attribute-bonus-sidebar {
  width: 110px;
  background-color: rgba(30, 25, 22, 0.8);
  border-radius: 6px;
  padding: 10px;
  margin-right: 5px;
  border: 1px solid rgba(218, 165, 32, 0.3);
  overflow: auto;
  max-height: 400px;
}

.sidebar-title {
  color: #daa520;
  font-size: 16px;
  text-align: center;
  margin-bottom: 10px;
  font-weight: bold;
  border-bottom: 1px solid rgba(218, 165, 32, 0.3);
  padding-bottom: 5px;
}

.bonus-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  align-items: center;
}

.bonus-name {
  color: #a0a0a0;
  font-size: 12px;
}

.bonus-value {
  width: 30px;
  height: 25px;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  font-size: 14px;
  color: #a0a0a0;
}

.bonus-positive {
  color: #4CAF50;
  font-weight: bold;
}

.bonus-explanation {
  margin-top: 10px;
  font-size: 10px;
  color: #7a7a7a;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(218, 165, 32, 0.3);
  padding-top: 5px;
}

.bonus-explanation text {
  margin-bottom: 2px;
}

/* 添加负值样式 */
.bonus-negative {
  color: #FF5252;
  font-weight: bold;
}

/* 添加详细奖励样式 */
.detailed-bonuses {
  margin-left: 10px;
  margin-bottom: 5px;
  border-left: 1px solid rgba(218, 165, 32, 0.2);
  padding-left: 5px;
}

.detail-bonus {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #a0a0a0;
  margin-bottom: 2px;
}

.detail-name {
  color: #daa520;
  opacity: 0.8;
}

.detail-value {
  color: #ffffff;
  opacity: 0.9;
}

.detail-value.initial-value {
  color: #e0c999; /* 与属性名称相同的颜色，区别于加成颜色 */
}

/* 弹出框按钮样式 */
.bonus-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: auto;
  gap: 30px; /* 增加按钮之间的间距 */
}

/* 按钮容器占用更多空间 */
.bonus-button-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  justify-content: center;
}

/* 加成按钮基础样式 */
.bonus-button {
  position: relative;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 6px 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.25);
  width: 90px; /* 固定宽度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* 按钮内容样式 */
.bonus-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 20px; /* 固定高度确保垂直居中 */
}

.bonus-text {
  font-size: 14px; /* 减小字体大小 */
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  text-align: center;
}

/* 特殊图标样式 */
.special-icon {
  font-size: 14px;
  margin-right: 4px; /* 减小右侧间距 */
  transition: transform 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bonus-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(218, 165, 32, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bonus-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.bonus-button:active::after {
  opacity: 1;
}

.bonus-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  margin-right: 7.5px;
}

.bonus-icon image {
  width: 100%;
  height: 100%;
  filter: invert(70%) sepia(85%) saturate(401%) hue-rotate(360deg) brightness(100%) contrast(97%);
}

.bonus-button:active .bonus-icon image {
  transform: scale(1.2);
}

/* 弹出框样式 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
}

.popup-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-height: 70%;
  background: linear-gradient(135deg, #3d3332, #221a18);
  border: 1px solid #daa520;
  border-radius: 6px;
  z-index: 101;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: rgba(218, 165, 32, 0.2);
  border-bottom: 1px solid rgba(218, 165, 32, 0.5);
}

.header-title-area {
  display: flex;
  align-items: center;
  gap: 7.5px;
  flex: 1;
}

.popup-header text {
  color: #daa520;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}

.equipment-reset-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: transform 0.4s ease;
  margin-left: 25px; /* 从15px增加到25px，使按钮更靠右 */
}

.equipment-reset-btn:active {
  opacity: 0.7;
}

.close-btn {
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #F5F5F7;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 2.5px;
  cursor: pointer;
  z-index: 999;
}

.close-btn-hover {
  background-color: rgba(255, 0, 0, 0.3);
}

/* 防止触摸穿透和滑动 */
.preventTouchMove {
  touch-action: none;
}

.popup-body {
  padding: 10px;
  overflow-y: auto;
  height: calc(100% - 40px); /* 减去header的高度 */
  display: flex;
  flex-direction: column;
}

.popup-info {
  font-size: 14px;
  color: #a0a0a0;
  text-align: center;
  margin-bottom: 10px;
}

/* 特定弹出框样式定制 */
.equipment-popup {
  width: 90%;
  height: 90%;
  max-width: 325px;
  max-height: 90vh;
  background-color: #1e1d22;
  border: 2px solid #9c8b67;
  transform: translate(-50%, -45%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 添加一个半透明遮罩，确保UI元素清晰可见 */
.equipment-popup::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7); /* 增加遮罩不透明度 */
  z-index: 1;
}

/* 确保弹出框内所有内容在遮罩上方 */
.equipment-popup view,
.equipment-popup text,
.equipment-popup image {
  position: relative;
  z-index: 2;
}

.popup-body {
  padding: 10px;
  overflow-y: auto;
  height: calc(100% - 40px); /* 减去header的高度 */
  display: flex;
  flex-direction: column;
}

.equipment-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0px; /* 减少底部边距 */
}

.equipment-left-column,
.equipment-right-column {
  display: flex;
  flex-direction: column;
  width: 25%;
  gap: 4px;
}

.character-display {
  width: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.character-image {
  width: 100%;
  height: 225px;
  object-fit: contain;
}

.level-indicator {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  border: 1px solid #9c8b67;
}

.equip-slot {
  width: 60px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid #5a5a5a;
  margin: 3px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
  overflow: hidden;
}

.equip-slot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.equip-slot .slot-name {
  z-index: 2;
  color: #ff3333;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 1px 1px 2px black;
  text-align: center;
  width: 100%;
  transition: all 0.3s ease;
}

/* 选中装备后的样式 */
.equip-slot.equipped .slot-name {
  top: 25%;
  transform: translate(-50%, -50%);
  color: #daa520;
  font-weight: bold;
}

.equip-slot image {
  z-index: 3;
  width: 80%;
  height: 80%;
}

.equipment-bottom-row {
  display: flex;
  justify-content: space-around;
  margin: 0 0 5px 0; /* 减少顶部边距 */
  transform: translateY(-7.5px); /* 向上移动 */
}

.equipment-bottom-row .equip-slot {
  flex: 0 0 30%;
  max-width: 70px;
}

.equipment-stats {
  margin-top: 0px; /* 减少顶部间距 */
  background-color: rgba(0, 0, 0, 0.3);
  padding: 10px;
  border: 1px solid #5a5a5a;
  flex-shrink: 0;
  min-height: 100px;
  max-height: 100px;
  overflow-y: auto;
  transform: translateY(-10px); /* 向上移动整个面板 */
}

.equipment-bonus-title {
  color: #9c8b67;
  font-size: 14px;
  text-align: center;
  margin-bottom: 5px;
}

.equipment-bonus-list {
  color: #fff;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
}

.equipment-bonus-item {
  width: 48%;
  height: 21px;
  margin: 2px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
  background-color: rgba(0, 0, 0, 0.2); /* 保留轻微背景色 */
  border-radius: 2px;
  box-sizing: border-box;
  overflow: visible; /* 确保括号不被截断 */
  border: none; /* 移除边框，避免遮挡 */
}

.attribute-name {
  color: #e0c999;
  text-align: left;
  flex: 1;
}

.attribute-value {
  text-align: right;
  font-family: monospace;
  display: flex;
  align-items: center;
  min-width: 42.5px; /* 进一步增加宽度 */
  justify-content: flex-end;
  white-space: nowrap;
  overflow: visible;
  background-color: transparent; /* 移除背景色 */
  position: relative;
  padding-right: 2.5px; /* 增加右侧内边距 */
}

.base-value {
  margin-right: 2px;
  overflow: visible;
  background-color: transparent; /* 确保没有背景色 */
}

.bonus-value {
  font-size: 11px;
  overflow: visible;
  white-space: nowrap;
  padding-right: 2.5px; /* 增加右括号空间 */
  background-color: transparent; /* 确保没有背景色 */
}

.bonus-positive {
  color: #4CAF50;
}

.bonus-negative {
  color: #FF5252;
}

/* 统一装备项目样式并降低高度 */
.equip-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.4);
  margin-bottom: 4px; /* 减小底部间距 */
  padding: 3px 7.5px; /* 减小内边距 */
  border-radius: 3px;
  border: 1px solid #5a5a5a;
  width: 100%;
  box-sizing: border-box;
  min-height: 25px; /* 减小最小高度 */
  position: relative;
}

/* 统一装备名称样式 */
.equip-item-name {
  color: #e0c999;
  font-size: 12px;
  font-weight: bold;
  margin-right: 7.5px;
}

/* 统一装备属性加成样式 */
.equip-bonus-text {
  color: #4CAF50;
  font-size: 11px;
  background-color: rgba(76, 175, 80, 0.1);
  padding: 1px 3px;
  border-radius: 2px;
  border: 1px solid rgba(76, 175, 80, 0.2);
  white-space: nowrap;
}

/* 统一选中标记样式 */
.equip-selected-mark {
  position: absolute;
  right: 2.5px;
  top: 1px;
  background-color: #daa520;
  color: #1e1d22;
  font-size: 9px;
  padding: 0.5px 3px;
  border-radius: 4px;
  font-weight: bold;
}

/* 优化移除按钮样式 */
.remove-equipment-btn {
  margin-top: 6px;
  margin-bottom: 4px;
  background-color: rgba(244, 67, 54, 0.2);
  color: #F44336;
  font-size: 12px;
  padding: 5px 0;
  text-align: center;
  border-radius: 3px;
  border: 1px solid rgba(244, 67, 54, 0.5);
}

/* 减小选择信息文本的间距 */
.equip-selection-info {
  color: #9c8b67;
  font-size: 12px;
  text-align: center;
  margin-bottom: 4px;
}

/* 减小弹窗整体高度 */
.equip-selection-popup {
  width: 80%;
  height: 65%;
  max-height: 65vh;
}

/* 修改图标样式 */
.icon-container {
  margin-top: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-icon {
  opacity: 0.9;
  transition: transform 0.3s ease;
}

.bonus-button:active .custom-icon {
  transform: scale(1.2);
}

.bonus-icon {
  font-size: 20px;
  margin-top: 4px;
  transition: transform 0.3s ease;
}

.bonus-button:active .bonus-icon {
  transform: scale(1.2);
}

/* 字母图标样式 */
.letter-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  margin-right: 7.5px;
  font-size: 15px;
  font-weight: bold;
  color: #daa520;
  background: rgba(218, 165, 32, 0.15);
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.bonus-button:active .letter-icon {
  transform: scale(1.2);
}

/* 更新图标样式 */
.icon-helmet, .icon-attribute {
  font-size: 18px;
  margin-right: 7.5px;
  transition: transform 0.3s ease;
  color: #daa520;
}

.bonus-button:active .icon-helmet,
.bonus-button:active .icon-attribute {
  transform: scale(1.2);
}

/* 特殊图标样式 */
.special-icon {
  font-size: 14px;
  margin-right: 4px; /* 减小右侧间距 */
  transition: transform 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bonus-button:active .special-icon {
  transform: scale(1.2);
}

/* 确保图标颜色一致 */
.helmet-icon, .attribute-icon {
  color: #daa520;
}

/* 装备UI相关样式 */
.equipment-ui {
  display: flex;
  flex-direction: row;
  padding: 10px;
  position: relative;
}

.equipment-left-column,
.equipment-right-column {
  display: flex;
  flex-direction: column;
  width: 90px;
  gap: 10px;
}

.character-image-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.character-image {
  max-width: 100%;
  max-height: 250px;
  object-fit: contain;
}

.equipment-slot {
  width: 80px;
  height: 80px;
  border: 1px solid #9b7e55;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 5px;
}

.equipment-slot.selected {
  border: 2px solid #daa520;
  box-shadow: 0 0 5px #daa520;
}

.slot-name {
  color: #ff3333;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 1px 1px 2px black;
  text-align: center;
  width: 100%;
}

.bottom-equipment-slots {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  gap: 20px;
}

.equipment-bonus-summary {
  margin-top: 15px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}

.summary-title {
  color: #daa520;
  font-size: 14px;
  text-align: center;
  margin-bottom: 5px;
}

.bonus-summary-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.bonus-summary-item {
  display: flex;
  width: 45%;
  padding: 5px;
  justify-content: space-between;
}

.bonus-name {
  color: #dddddd;
}

.bonus-value {
  color: #4CAF50;
}

.equipment-selection-popup {
  max-height: 80vh;
  width: 80%;
}

.equipment-selection-list {
  max-height: 175px;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 5px;
  border-bottom: none;
}

/* 修改装备选择为空时的提示样式 */
.equip-selection-empty {
  color: #FFFFFF;
  text-align: center;
  padding: 20px 10px;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  margin-top: 10px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 选中的装备项样式 */
.equip-item-selected {
  background-color: rgba(156, 139, 103, 0.2);
  border: 1px solid #daa520;
  position: relative;
}

/* 已装备标记样式 */
.equip-selected-mark {
  position: absolute;
  right: 2.5px;
  top: 2.5px;
  background-color: #daa520;
  color: #1e1d22;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 5px;
  font-weight: bold;
}

/* 调整装备项目高度以容纳选中标记 */
.equip-item {
  position: relative;
  min-height: 35px;
}

/* 已装备的槽位名称样式 */
.equipped-name {
  color: #daa520 !important;
  font-weight: bold;
}

/* 槽位加成样式 */
.slot-bonus {
  position: absolute;
  bottom: 2.5px;
  left: 0;
  width: 100%;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 1.5px 0;
  font-size: 10px;
  color: #4CAF50;
  text-align: center;
}

/* 优化多属性显示 */
.slot-bonus text {
  display: block;
  line-height: 1.2;
  width: 100%;
}

/* 加大装备槽高度以容纳多行显示 */
.equip-slot {
  width: 60px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid #5a5a5a;
  margin: 3px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
  overflow: hidden;
}

/* 槽位名称上移更多 */
.equip-slot .slot-name {
  top: 20%;
}

/* 优化已装备槽位的样式 */
.equip-slot.equipped {
  border-color: #9c8b67;
  background-color: rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 2.5px #daa520;
}

/* 添加全属性样式 */
.equip-bonus-text.all-stats {
  color: #ffd700;
  font-weight: bold;
}

/* 添加负面属性样式 */
.negative-bonus {
  color: #FF5252 !important;
  background-color: rgba(255, 82, 82, 0.1);
  border: 1px solid rgba(255, 82, 82, 0.2);
}

.negative-bonus-text {
  color: #FF5252 !important;
}

/* 更新装备加成区域样式以支持负面属性 */
.equipment-bonus-item .negative {
  color: #FF5252;
}

/* 专门针对耳环属性显示优化 */
.equip-slot[data-slot="earring"] .slot-bonus {
  padding: 0.5px 0;
  line-height: 1;
}

.equip-slot[data-slot="earring"] .slot-bonus text {
  margin: 0;
  padding: 0.5px 0;
  line-height: 1.1;
}

/* 确保装备槽能够容纳多行小字体文本 */
.equip-slot[data-slot="earring"] {
  height: 62.5px;
}

/* 确保耳环的槽位名称位置正确 */
.equip-slot[data-slot="earring"] .slot-name {
  top: 15%;
}

/* 修复耳环属性显示 */
.earring-bonus {
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 2px 0;
  border-radius: 0;
}

.earring-bonus text {
  font-size: 9px;
  line-height: 11px;
  text-align: center;
  display: block;
  margin: 0.5px 0;
}

.positive-bonus-text {
  color: #4CAF50 !important;
}

.negative-bonus-text {
  color: #FF5252 !important;
}

/* 调整耳环装备槽的高度和属性位置 */
.equip-slot[data-slot="earring"] {
  height: 60px;
}

.equip-slot[data-slot="earring"] .slot-name {
  top: 20%;
}

/* 使用类选择器替代属性选择器 */
.earring-slot {
  height: 60px !important;
}

.earring-slot .slot-name {
  top: 20% !important;
}

.earring-bonus {
  position: absolute !important;
  bottom: 5px !important;
  left: 0 !important;
  width: 100% !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  padding: 1.5px 0 !important;
}

.earring-bonus .bonus-text {
  font-size: 9px !important;
  line-height: 10px !important;
  margin: 1px 0 !important;
  display: block !important;
}

.positive-bonus-text {
  color: #4CAF50 !important;
}

.negative-bonus-text {
  color: #FF5252 !important;
}

/* 添加装备加成按钮高亮样式 */
.active-bonus-button {
  background-color: rgba(218, 165, 32, 0.4) !important;
  border-color: #daa520 !important;
  box-shadow: 0 2px 6px rgba(218, 165, 32, 0.4) !important;
}

/* 添加对号样式 */
.check-mark {
  color: #4CAF50;
  margin-left: 3px;
  font-weight: bold;
  font-size: 12px;
}

/* 优化按钮内容布局 */
.bonus-content {
  display: flex;
  align-items: center;
}

.equipment-bonus-item .attribute-value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* 可以稍微提高选择器优先级（虽然通常不需要） */
.equipment-bonus-item .attribute-value .bonus-negative {
  color: #FF5252;
}

/* 武器类型样式 */
.weapon-type {
  color: #daa520;
  font-size: 11px;
  margin-left: 5px;
  font-weight: bold;
}

/* 装备项信息包装 */
.equip-item-info {
  display: flex;
  align-items: center;
}

/* 禁用的槽位样式 */
.disabled-slot {
  opacity: 0.5;
  position: relative;
  pointer-events: none;
}

.disabled-text {
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 8px;
  color: #FF5252;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 1px 0;
  z-index: 10;
}

/* 武器类型徽章样式 */
.weapon-type-badge {
  position: absolute;
  top: 45%;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 9px;
  color: #daa520;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 1px 0;
  z-index: 5;
  font-weight: bold;
}

/* 当显示武器类型时，调整属性栏的位置 */
.equip-slot[data-slot="weapon"] .slot-bonus {
  bottom: 2.5px;
}

/* 当显示武器类型时，调整槽位名称的位置 */
.equip-slot[data-slot="weapon"] .slot-name {
  top: 20%;
}

/* Pagination Controls Styles - Updated */
.pagination-controls {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 10px !important;
}

.pagination-button {
  background-color: #3c322d !important;
  color: white !important;
  border: 1px solid #daa520 !important;
  border-radius: 4px !important;
  padding: 5px 10px !important;
  font-size: 14px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 80px !important;
  height: 30px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.pagination-button[disabled] {
  border-color: #666 !important;
  color: #aaa !important;
  opacity: 0.7 !important;
  background-color: #3c322d !important;
}

.page-indicator {
  color: #daa520 !important;
  text-align: center !important;
}

.pagination-button-hover {
  background-color: #4e423d;
  color: #daa520;
}

/* Fix equipment selection list to ensure it doesn't overlap with pagination */
.equip-selection-list {
  max-height: 175px;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 5px;
}

/* Move pagination controls to the bottom of popup */
.pagination-controls {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 10px !important;
}

/* Adjust equipment selection list height */
.equipment-selection-list {
  max-height: 175px;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 5px;
}

/* Change page indicator to be more compact */
.page-indicator {
  color: #daa520;
  font-size: 11px;
  padding: 2px 6px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  border: 1px solid rgba(218, 165, 32, 0.3);
  width: 25%;
  text-align: center;
}

/* Make pagination buttons smaller */
.pagination-button {
  width: 30%;
  min-width: 35px;
  padding: 3px 5px;
  font-size: 10px;
}

/* Optimize the layout for popup body */
.popup-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 0;
}

/* Create a pagination container at the bottom */
.pagination-container {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  width: 100%;
  margin-bottom: 5px;
  transform: translateY(-5px);
  border-top: none;
  background: transparent;
}

/* Adjust remove button */
.remove-equipment-btn {
  margin: 4px 0 0 0;
}

/* Additional style to ensure the text is properly centered */
.pagination-button text {
  color: white !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

/* Move pagination controls upward */
.pagination-container {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  width: 100%;
  margin-bottom: 5px;
}

.pagination-controls {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 10px !important;
  margin-top: -10px !important;
  border-top: none !important;
  background: transparent !important;
}

/* 属性加成相关样式 */
.attribute-popup {
  width: 90%;
  height: 90%;  /* 从85%改为90%，与装备加成页面一致 */
  max-width: 325px;
  max-height: 90vh;  /* 从85vh改为90vh，与装备加成页面一致 */
  background-color: #1e1d22;
  border: 2px solid #9c8b67;
  transform: translate(-50%, -45%);
  background-position: center;  /* 添加背景属性，与装备加成页面一致 */
  background-size: cover;
  background-repeat: no-repeat;
}

/* 添加一个半透明遮罩，确保UI元素清晰可见，与装备加成页面一致 */
.attribute-popup::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7); /* 增加遮罩不透明度 */
  z-index: 1;
}

/* 确保弹出框内所有内容在遮罩上方，与装备加成页面一致 */
.attribute-popup view,
.attribute-popup text,
.attribute-popup image {
  position: relative;
  z-index: 2;
}

.attribute-popup .popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: rgba(218, 165, 32, 0.2);
  border-bottom: 1px solid rgba(218, 165, 32, 0.5);
  position: sticky;
  top: 0;
  z-index: 10;
}

.attribute-popup .popup-body {
  padding: 10px;
  overflow-y: auto;
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  max-height: none;  /* 移除max-height限制，使用height计算 */
}

/* 属性加成弹出页面样式，每行一个分类，更美观 */
.attribute-categories {
  display: flex;
  flex-direction: column;
  gap: 7.5px;
  margin-bottom: 10px;
  flex: 1;  /* 让分类列表占据可用空间 */
  overflow-y: auto;  /* 添加滚动，以防内容过多 */
}

.attribute-category {
  width: 100%;
  min-height: 60px;
  background-color: rgba(30, 30, 30, 0.8);
  border: 1px solid rgba(156, 139, 103, 0.5);
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  position: relative;
  transition: all 0.2s;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  margin-bottom: 10px;
}

.attribute-category:active {
  transform: scale(0.98);
  background-color: rgba(50, 50, 50, 0.8);
}

.attribute-category.has-bonus {
  border-color: #daa520 !important;
  background-color: rgba(50, 40, 10, 0.8) !important;
  box-shadow: 0 1px 5px rgba(218, 165, 32, 0.5) !important;
  border-width: 2px !important;
}

/* 让选中状态的元素有高亮动画效果 */
@keyframes border-glow {
  0% { box-shadow: 0 0 2.5px rgba(218, 165, 32, 0.3); }
  50% { box-shadow: 0 0 5px rgba(218, 165, 32, 0.7); }
  100% { box-shadow: 0 0 2.5px rgba(218, 165, 32, 0.3); }
}

.attribute-category.has-bonus {
  animation: border-glow 1.5s infinite;
}

.category-icon {
  font-size: 18px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  border: 1px solid rgba(218, 165, 32, 0.3);
}

.category-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.category-name {
  color: #e0c999;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 3px;
}

.category-desc {
  color: rgba(224, 201, 153, 0.6);
  font-size: 11px;
  line-height: 1.2;
}

.category-status {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
  min-width: 25px;
  margin-left: auto;
}

.category-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #67c23a;
  color: white;
  font-size: 9px;
  border-radius: 2px;
  padding: 2px 4px;
  line-height: 1;
  text-align: center;
  white-space: normal;
  font-weight: bold;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  min-width: 30px;
  height: auto;
  max-width: none;
}

.category-arrow {
  display: none;
}

/* 适配小屏幕设备 */
@media screen and (max-width: 375px) {
  .category-name {
    font-size: 14px;
  }
  
  .category-desc {
    font-size: 10px;
  }
  
  .attribute-category {
    padding: 6px 7.5px;
    min-height: 50px;
  }
}

/* 调整属性加成弹出框的总体边距和滚动 */
.attribute-popup .popup-body {
  padding: 12.5px;
  overflow-y: auto;
  max-height: calc(100% - 50px);
}

/* 属性加成面板样式调整 */
.attribute-bonus-panel {
  margin-top: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  padding: 7.5px;
  border: 1px solid rgba(156, 139, 103, 0.5);
}

.attribute-bonus-title {
  color: #daa520;
  font-size: 13px;
  text-align: center;
  margin-bottom: 5px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.attribute-bonus-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.attribute-bonus-row {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}

.attribute-bonus-item {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(20, 20, 20, 0.5);
  padding: 3px 6px;
  border-radius: 3px;
  min-height: 25px;
}

.attribute-name {
  color: #e0c999;
  font-size: 12px;
}

.attribute-value {
  display: flex;
  align-items: center;
}

.base-value {
  color: white;
  font-size: 12px;
  min-width: 12px;
  text-align: right;
}

.bonus-value {
  font-size: 11px;
  margin-left: 2px;
}

.bonus-positive {
  color: #4CAF50;
}

.bonus-negative {
  color: #F44336;
}

/* 添加点击图标的样式 */
.category-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: rgba(218, 165, 32, 0.3);
  border: 1px solid rgba(218, 165, 32, 0.5);
  border-radius: 50%;
  color: #daa520;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.2s;
}

/* 点击效果 */
.attribute-category:active .category-icon-btn {
  transform: scale(0.9);
  background-color: rgba(218, 165, 32, 0.5);
}

/* 确保状态区域有足够空间 */
.category-status {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
}

/* 移除原有的箭头样式 */
.category-arrow {
  display: none;
}

/* 属性选择弹窗样式 */
.attribute-selection-popup {
  width: 90%;
  max-width: 325px;
  height: 70%;
  max-height: 70vh;
  background-color: #1e1d22;
  border: 2px solid #9c8b67;
  transform: translate(-50%, -45%);
}

.attribute-selection-info {
  color: #e0c999;
  font-size: 14px;
  margin-bottom: 10px;
  text-align: center;
}

.attribute-selection-list {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  padding: 7.5px;
  margin-bottom: 10px;
  max-height: calc(60vh - 70px);
  overflow-y: auto;
  border-bottom: none;
}

.attribute-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: rgba(30, 30, 30, 0.7);
  border-radius: 4px;
  margin-bottom: 7.5px;
  border: 1px solid rgba(156, 139, 103, 0.3);
  transition: all 0.2s;
  position: relative;
}

.attribute-option:active {
  background-color: rgba(50, 40, 20, 0.8);
  transform: scale(0.98);
  border-color: rgba(218, 165, 32, 0.5);
}

.attribute-option.selected-option {
  background-color: rgba(50, 40, 15, 0.8);
  border: 1px solid rgba(218, 165, 32, 0.7);
  box-shadow: 0 1px 4px rgba(218, 165, 32, 0.2);
}

.equipped-mark {
  position: absolute;
  right: -4px;
  top: -4px;
  background-color: #4CAF50;
  color: white;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 5px;
  font-weight: bold;
}

.option-name {
  color: #e0c999;
  font-size: 14px;
  font-weight: 500;
}

.option-bonus {
  color: #4CAF50;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 6px;
  background-color: rgba(76, 175, 80, 0.1);
  border-radius: 3px;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.attribute-selection-empty {
  color: rgba(224, 201, 153, 0.6);
  font-size: 13px;
  text-align: center;
  padding: 20px 0;
}

.remove-attribute-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0;
  margin: 15px 10px 10px 10px;
  background-color: rgba(244, 67, 54, 0.15);
  border: 1px solid rgba(244, 67, 54, 0.5);
  color: #F44336;
  font-size: 13px;
  font-weight: 500;
  border-radius: 3px;
  height: 30px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(244, 67, 54, 0.5);
  margin-top: 15px;
}

.remove-attribute-btn:active {
  background-color: rgba(244, 67, 54, 0.25);
  transform: scale(0.98);
}

/* 调整属性选择列表布局 */
.attribute-selection-priority {
  order: -1;
  margin-bottom: 10px;
}

.popup-body {
  display: flex;
  flex-direction: column;
}

.attribute-selection-info {
  margin-bottom: 7.5px;
  font-weight: 500;
  color: #e0c999;
  font-size: 14px;
  text-align: center;
}

/* 让移除按钮保持在底部 */
.remove-attribute-btn {
  margin-top: auto;
  margin-bottom: 7.5px;
}

/* 确保弹窗主体有足够空间 */
.attribute-selection-popup .popup-body {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: none;
}

/* 在移除按钮前添加分隔线 */
.attribute-selection-popup .popup-body::before {
  display: none;
}

.attribute-group-title {
  color: #daa520;
  font-size: 13px;
  padding: 10px 10px 5px 10px;
  border-bottom: 1px solid rgba(218, 165, 32, 0.3);
  margin: 7.5px 0 5px 0;
  font-weight: 500;
}

/* 确保第一个组标题上方没有太大的间距 */
.attribute-group-title:first-child {
  margin-top: 2.5px;
}

.combined-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.combined-badge .category-badge {
  margin: 0;
  line-height: 1.2;
}

/* Add styling for magic doll multi-attribute badges */
.magic-doll-combined-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.magic-doll-combined-badge .category-badge {
  margin: 0;
  line-height: 1.2;
}

.remove-attribute-btn {
  margin-top: 6px;
  margin-bottom: 4px;
  background-color: rgba(244, 67, 54, 0.2);
  color: #F44336;
  font-size: 12px;
  padding: 5px 0;
  text-align: center;
  border-radius: 3px;
  border: 1px solid rgba(244, 67, 54, 0.5);
}

.remove-attribute-btn:active {
  background-color: rgba(244, 67, 54, 0.25);
  transform: scale(0.98);
}

.remove-attribute-btn:active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  z-index: 1;
}

/* 刻印属性面板样式 */
.engrave-attribute-container {
  background-color: rgba(30, 25, 22, 0.6);
  border-radius: 6px;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid rgba(218, 165, 32, 0.3);
}

.engrave-title {
  color: #daa520;
  font-size: 14px;
  text-align: center;
  margin-bottom: 10px;
  font-weight: bold;
  border-bottom: 1px solid rgba(218, 165, 32, 0.3);
  padding-bottom: 5px;
}

.engrave-point-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7.5px;
  padding: 5px 0;
}

.engrave-point-name {
  font-size: 13px;
  color: #e0c999;
  font-weight: bold;
  width: 50px;
  text-align: left;
}

.engrave-point-control {
  display: flex;
  align-items: center;
}

.engrave-point-btn {
  width: 30px;
  height: 30px;
  background-color: rgba(50, 45, 40, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #daa520;
  border: 1px solid rgba(218, 165, 32, 0.5);
  border-radius: 4px;
  transition: all 0.2s;
}

.engrave-point-btn:active {
  transform: scale(0.95);
  background-color: rgba(70, 60, 55, 0.9);
}

.engrave-point-btn.disabled {
  opacity: 0.5;
  color: #7a7a7a;
  pointer-events: none;
}

.engrave-point-value {
  width: 40px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.6);
  margin: 0 7.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: white;
  border-radius: 4px;
}

/* 增加和减少按钮的特殊样式 */
.engrave-point-btn.increase {
  background-color: rgba(76, 175, 80, 0.2);
  border-color: rgba(76, 175, 80, 0.5);
  color: #4CAF50;
}

.engrave-point-btn.decrease {
  background-color: rgba(244, 67, 54, 0.2);
  border-color: rgba(244, 67, 54, 0.5);
  color: #F44336;
}

.engrave-point-btn.increase:active {
  background-color: rgba(76, 175, 80, 0.3);
}

.engrave-point-btn.decrease:active {
  background-color: rgba(244, 67, 54, 0.3);
}

/* 为刻印按钮添加样式 */
.engrave-badges-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
  z-index: 1;
}

.engrave-badge {
  background-color: #e6a23c;
  color: #fff;
  font-size: 10px;
  padding: 1px 3px;
  border-radius: 3px;
  font-weight: bold;
}

/* 修改刻印徽章样式，使其显示在按钮内部 - 使用绝对定位确保横向排列 */
.engrave-status-badges {
  position: relative !important;
  width: 110px !important;
  height: 30px !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  gap: 2px !important;
}

.category-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #67c23a !important;
  color: white !important;
  font-size: 8px !important;
  border-radius: 2px !important;
  padding: 1px 2px !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: bold !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  width: calc((100% - 4px) / 3) !important; /* 计算宽度确保每行3个 */
  height: 11px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* 确保万能药徽章在主页面上正确显示 */
.attribute-category .category-status .engrave-status-badges {
  position: relative !important;
  width: 110px !important;
  height: 30px !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  gap: 2px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 针对万能药按钮和刻印按钮的特定样式 */
.attribute-category[data-category="potion"] .category-status .engrave-status-badges,
.attribute-category[data-category="engrave"] .category-status .engrave-status-badges {
  position: relative !important;
  width: 110px !important;
  height: 30px !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  gap: 2px !important;
}

/* 确保属性显示在同一行 */
.attribute-category[data-category="potion"] .category-status,
.attribute-category[data-category="engrave"] .category-status {
  min-width: 110px !important;
  width: 110px !important;
  height: 35px !important;
  min-height: 35px !important;
  padding: 2.5px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* 确保徽章显示横向并且紧凑 */
.attribute-category[data-category="potion"] .category-status .category-badge,
.attribute-category[data-category="engrave"] .category-status .category-badge {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: calc((100% - 4px) / 3) !important; /* 确保每行3个 */
  font-size: 8px !important;
  padding: 1px 2px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* 移除combined-badge的原有样式，确保横向排列 */
.combined-badge {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
  justify-content: flex-end !important;
  width: 110px !important;
}

.combined-badge .category-badge {
  margin: 0 !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

.potion-attribute-container {
  background-color: rgba(30, 25, 22, 0.6);
  border-radius: 6px;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid rgba(218, 165, 32, 0.3);
}

.potion-title {
  color: #daa520;
  font-size: 14px;
  text-align: center;
  margin-bottom: 10px;
  font-weight: bold;
  border-bottom: 1px solid rgba(218, 165, 32, 0.3);
  padding-bottom: 5px;
}

.potion-remaining-points {
  font-size: 13px;
  color: #e0c999;
  font-weight: bold;
  text-align: center;
  margin-bottom: 7.5px;
  background-color: rgba(218, 165, 32, 0.1);
  padding: 4px;
  border-radius: 4px;
  border: 1px solid rgba(218, 165, 32, 0.3);
}

/* 添加烹饪按钮的特定样式 */
.attribute-category[data-category="cooking"] .category-status .engrave-status-badges {
  position: relative !important;
  width: 110px !important;
  height: 30px !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  gap: 2px !important;
}

/* 确保烹饪按钮的属性显示在同一行 */
.attribute-category[data-category="cooking"] .category-status {
  min-width: 110px !important;
  width: 110px !important;
  height: 35px !important;
  min-height: 35px !important;
  padding: 2.5px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* 确保烹饪徽章显示横向并且紧凑 */
.attribute-category[data-category="cooking"] .category-status .category-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #67c23a !important;
  color: white !important;
  font-size: 9px !important;
  border-radius: 2px !important;
  padding: 2px 4px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  font-weight: bold !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  width: auto !important;
  min-width: 35px !important;
  height: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* 烹饪分类按钮上的徽章特殊处理 */
.attribute-category[data-category="cooking"] .category-status .category-badge {
  width: auto !important;
  min-width: 42.5px !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  overflow: visible !important;
  padding: 2px 5px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

/* 烹饪分类按钮上的徽章特殊处理 - 使用更高优先级选择器 */
.attribute-categories .attribute-category[data-category="cooking"] .category-status .category-badge {
  width: auto !important;
  min-width: 42.5px !important;
  max-width: 60px !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  overflow: visible !important;
  padding: 2px 5px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  display: inline-block !important;
  text-align: center !important;
  box-sizing: content-box !important;
}

/* 收藏品属性加成样式 - 确保属性名称不换行 */
.attribute-name-inline {
  display: inline-block;
  white-space: nowrap;
  width: 60px; /* 根据需要调整宽度 */
  font-size: 14px;
  color: #e6c884;
  margin-right: 10px;
  line-height: 1;
  text-align: left;
}

/* 弹出框按钮容器 */
.bonus-buttons-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px; /* 减少底部边距 */
}

/* 半宽容器 */
.half-width-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
}

.half-width-container.left {
  padding-right: 7.5px; /* 向左偏移一点，使视觉上更平衡 */
}

.half-width-container.right {
  padding-left: 7.5px; /* 向右偏移一点，使视觉上更平衡 */
}

/* 耳环装备槽的特殊处理 */
.equip-slot.earring-slot {
  height: 62.5px;
}

.equip-slot.earring-slot .slot-name {
  top: 30%;
}

.equip-slot.earring-slot.equipped .slot-name {
  top: 18%;
}

.slot-bonus.earring-bonus {
  padding: 1px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slot-bonus.earring-bonus .bonus-text {
  font-size: 9px;
  line-height: 10px;
  margin: 0.5px 0;
}

/* 正负属性颜色 */
.positive-bonus-text {
  color: #4CAF50 !important;
}

.negative-bonus-text {
  color: #FF5252 !important;
}

/* 武器类型角标样式 */
.weapon-type-corner {
  position: absolute;
  top: 3px;
  left: 3px;
  font-size: 8px;
  color: #daa520;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 1px 3px;
  z-index: 5;
  font-weight: bold;
  border-radius: 2px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* 武器槽的装备名样式 */
.equip-slot[data-slot="weapon"].equipped .slot-name {
  top: 25%;
}

/* 武器槽属性显示位置 */
.equip-slot[data-slot="weapon"] .slot-bonus {
  position: absolute;
  bottom: 2.5px;
  left: 0;
  width: 100%;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 1.5px 0;
  font-size: 10px;
  color: #4CAF50;
  text-align: center;
}

/* 覆盖旧武器类型样式，使用更高优先级的选择器 */
.equipment-bottom-row .equip-slot[data-slot="weapon"] .weapon-type-badge {
  display: none !important;
}

.equipment-bottom-row .equip-slot[data-slot="weapon"].equipped .slot-name {
  top: 25% !important;
}

.equipment-bottom-row .equip-slot[data-slot="weapon"] .slot-bonus {
  bottom: 2.5px !important;
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  padding: 1.5px 0 !important;
  font-size: 10px !important;
  color: #4CAF50 !important;
  text-align: center !important;
}

/* 优先级更高的属性加成弹出框样式，确保我们的修改生效 */
.popup-content.attribute-popup .popup-body {
  padding: 10px !important;
  overflow-y: auto !important;
  height: calc(100% - 40px) !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: none !important;  /* 移除max-height限制，使用height计算 */
}

/* 属性加成面板样式 */
.attribute-stats {
  margin-top: 0px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 10px;
  border: 1px solid #5a5a5a;
  flex-shrink: 0;
  min-height: 100px;
  max-height: 110px;
  overflow-y: auto;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* 装备加成面板标题 */
.equipment-bonus-title {
  font-size: 15px;
  color: #daa520;
  text-align: center;
  margin-bottom: 10px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 属性加成重置按钮 */
.attribute-reset-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: rgba(218, 165, 32, 0.2);
  cursor: pointer;
  transition: all 0.3s;
}

.attribute-reset-btn:hover {
  background-color: rgba(218, 165, 32, 0.4);
}

.attribute-reset-btn image {
  width: 20px;
  height: 20px;
}

/* 属性分类 */
.attribute-category {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s;
}

/* 分类移除按钮 */
.category-remove-btn {
  position: absolute;
  top: 0;
  left: -1.5px;
  padding: 0.5px 3px;
  background-color: #ff0000;
  color: white;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  z-index: 10;
  opacity: 0.9;
  box-shadow: 0 0 2.5px rgba(0, 0, 0, 0.5);
  width: auto;
  height: auto;
  margin-left: -2px;
}

.category-remove-btn:active {
  transform: scale(0.95);
  opacity: 1;
  background-color: #d40000;
}

/* 等级选择和升级点数分配样式 */
.level-selection {
  margin: 10px 0 10px 0;
  padding: 0;
  background-color: transparent;
  border: none;
}

.level-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.level-title text {
  color: #daa520;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.level-points {
  color: #daa520;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.level-slider-container {
  padding: 0 7.5px;
}

.level-marks {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}

.level-marks text {
  color: #a0a0a0;
  font-size: 11px;
}

/* 下拉菜单样式 */
.level-dropdown-container {
  flex: 1;
}

.available-points-row {
  display: flex;
  align-items: center;
  margin-top: 7.5px;
  padding: 0 10px;
}

.available-points-label {
  color: #daa520;
  font-size: 13px;
  font-weight: bold;
  margin-right: 5px;
}

.available-points-value {
  color: #e0c999;
  font-size: 13px;
}

.level-points-container {
  flex: 2;
  background-color: rgba(37, 33, 28, 0.5);
  border: 1px solid #967431;
  border-radius: 4px;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;
  box-sizing: border-box;
}

.level-picker-view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  background-color: rgba(37, 33, 28, 0.5);
  border: 1px solid #967431;
  border-radius: 4px;
  position: relative;
  height: 35px;
  box-sizing: border-box;
}

.level-picker-text {
  color: #daa520;
  font-size: 13px;
  font-weight: bold;
  text-align: left;
  flex: 1;
  padding: 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.level-picker-arrow {
  color: #daa520;
  font-size: 12px;
  margin-left: 10px;
  flex-shrink: 0;
}

.level-picker-view:active {
  background-color: rgba(37, 33, 28, 0.6);
}

.level-point-allocation {
  margin-bottom: 10px;
  padding: 0; /* 移除内边距 */
  background-color: transparent; /* 移除背景色 */
  border: none; /* 移除边框 */
}

/* 继承一些原有的点数分配样式，但做一些特殊调整 */
.level-up-allocation .point-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 5px 0;
}

.level-up-allocation .point-name {
  font-size: 18px;
  color: #daa520;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  width: 75px;
  margin-left: 5px;
}

.level-up-allocation .point-control {
  display: flex;
  align-items: center;
}

.level-up-allocation .point-btn {
  width: 40px;
  height: 40px;
  background-color: rgba(50, 45, 40, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #daa520;
  border: 1px solid rgba(218, 165, 32, 0.5);
  border-radius: 4px;
  transition: all 0.2s;
}

.level-up-allocation .point-btn:active {
  transform: scale(0.95);
  background-color: rgba(70, 60, 55, 0.9);
}

.level-up-allocation .point-value {
  width: 100px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.6);
  margin: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: white;
  border-radius: 4px;
}

/* 增加按钮的特殊样式 */
.level-up-allocation .increase {
  background-color: rgba(50, 45, 40, 0.8);
  border: 1px solid rgba(218, 165, 32, 0.5);
  color: #daa520;
}

.level-up-allocation .decrease {
  background-color: rgba(50, 45, 40, 0.8);
  border: 1px solid rgba(218, 165, 32, 0.5);
  color: #daa520;
}

.level-up-allocation .increase:active {
  background-color: rgba(70, 60, 55, 0.9);
}

.level-up-allocation .decrease:active {
  background-color: rgba(70, 60, 55, 0.9);
}

.level-up-allocation .point-btn.disabled {
  opacity: 0.5;
  color: #7a7a7a;
}

/* 适配剩余点数样式 */
.level-up-allocation .remaining-points {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
  padding: 10px;
}

.level-up-allocation .remaining-points text {
  font-size: 18px;
  color: #daa520;
  margin-right: 10px;
}

.level-up-allocation .points-value {
  width: 60px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: white;
  border-radius: 4px;
  margin-right: 10px;
}

.level-up-allocation .reset-btn {
  width: 35px;
  height: 35px;
  background: linear-gradient(135deg, #3e2b28, #2a1f1e);
  border: 1px solid #daa520;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: all 0.3s;
}

.level-up-allocation .reset-btn:active {
  opacity: 0.8;
  transform: scale(0.9);
  background: linear-gradient(135deg, #daa520, #b08319);
  border: 1px solid #ffcc00;
}

.level-row {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 10px; /* 增加底部间距 */
}

.level-picker-text {
  color: #daa520;
  font-size: 13px;
  font-weight: bold;
  line-height: 20px;
  text-align: left;
  flex: 1;
  padding: 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.level-points {
  color: #daa520;
  font-size: 12px;
  font-weight: normal;
  line-height: 20px;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 额外添加的统一高度样式 */
.level-picker-view, .level-points-container {
  height: 35px;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.class-icon-container {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 7.5px;
  background-color: rgba(37, 33, 28, 0.5);
  border: 1px solid #967431;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 6px;
}

.class-small-icon {
  width: 100%;
  height: 100%;
  display: block;
}

/* 在文件末尾添加 */
/* 自定义Toast样式 */
.custom-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 4px;
  padding: 10px 15px;
  max-width: 80%;
  z-index: 9999;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none; /* 不拦截点击事件 */
}

.custom-toast.show {
  opacity: 1;
}

.custom-toast-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.custom-toast-message {
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

/* 添加在CSS文件中适当位置，确保point-value风格与其他面板一致 */
.point-value {
  display: flex;
  align-items: center;
  min-width: 50px;
  justify-content: center;
}

.level-point-allocation .point-name {
  color: #e0c999;
  font-size: 13px;
  min-width: 40px;
}

/* 调整升级点数页面中的布局 */
.level-up-allocation {
  margin-bottom: 10px;
  /* 删除以下样式:
  padding: 10px;
  background-color: rgba(37, 33, 28, 0.6);
  border-radius: 6px;
  border: 1px solid #967431;
  */
  padding: 0; /* 移除内边距 */
  background-color: transparent; /* 移除背景色 */
  border: none; /* 移除边框 */
  /* 删除内部填充，为内容腾出更多空间 */
  padding: 7.5px 0;
}

/* 使点数行更紧凑 */
.level-up-allocation .point-row {
  margin-bottom: 7.5px;
  padding: 2.5px 0;
}

/* 缩小点数控制按钮的大小 */
.level-up-allocation .point-btn {
  width: 35px;
  height: 35px;
  font-size: 18px;
}

/* 缩小点数值显示的大小 */
.level-up-allocation .point-value {
  width: 90px;
  height: 35px;
  margin: 0 7.5px;
  font-size: 18px;
}

/* 缩小剩余点数区域的大小和上边距 */
.level-up-allocation .remaining-points {
  margin-top: 15px;
  padding: 7.5px;
}

/* 缩小剩余点数显示的大小 */
.level-up-allocation .points-value {
  width: 50px;
  height: 35px;
  font-size: 18px;
}

/* 缩小重置按钮的大小 */
.level-up-allocation .reset-btn {
  width: 30px;
  height: 30px;
}

/* 确保底部有足够的边距，不遮挡任何内容 */
.level-up-allocation {
  margin-bottom: 15px;
}

/* 整体页面布局调整 */
.safe-area-container {
  padding-bottom: 40px; /* 确保有足够的空间显示底部按钮 */
}

/* 剩余点数区域的样式 */
.level-up-allocation .remaining-points {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px; /* 减少顶部边距 */
  padding: 5px 0; /* 减少内边距 */
  border-top: 1px solid rgba(218, 165, 32, 0.3); /* 添加顶部分隔线 */
  padding-top: 10px; /* 增加顶部内边距 */
}

/* 确保移除外框样式 */
.level-up-allocation {
  background-color: transparent !important;
  border: none !important;
  padding: 7.5px 0 !important;
  margin-bottom: 10px !important;
}

.level-point-allocation {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 10px !important;
}

/* 确认配点弹窗样式 */
.confirm-points-popup {
  width: 90%;
  max-width: 325px;
  height: 80%;
  max-height: 85vh;
  background-color: #221a18;
  border: 2px solid #daa520;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.popup-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 垂直滚动区域样式 */
.confirm-attributes-scroll {
  flex: 1;
  max-height: calc(85vh - 165px); /* 减去头部和按钮区域高度 */
  overflow: hidden;
}

.confirm-attributes-container {
  padding: 10px;
}

/* 操作按钮区域 */
.confirm-buttons {
  display: flex;
  padding: 10px;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}

.button-wrapper {
  width: 42%;
  display: flex;
  justify-content: center;
}

.confirm-save-btn,
.confirm-share-btn {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 4px;
  background: none;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: linear-gradient(135deg, #3e2b28, #2a1f1e);
  color: #F5F5F7;
  border: 1px solid #daa520;
}

.button-icon {
  font-size: 16px;
  margin-right: 4px;
}

.confirm-buttons {
  display: flex;
  padding: 10px;
  justify-content: space-between;
  width: 95%;
  margin: 0 auto;
}

.confirm-save-btn {
  background: linear-gradient(135deg, #3e2b28, #2a1f1e);
  color: #daa520;
}

.confirm-share-btn {
  background: linear-gradient(135deg, #3e2b28, #2a1f1e);
  color: #e0c999;
}

.confirm-save-btn:active,
.confirm-share-btn:active {
  opacity: 0.8;
  transform: scale(0.98);
}

.confirm-save-btn::after,
.confirm-share-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(218, 165, 32, 0.6), transparent);
}

.confirm-points-header {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid rgba(218, 165, 32, 0.3);
  margin-bottom: 10px;
  background-color: rgba(218, 165, 32, 0.1);
}

.confirm-class-icon {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 20px;
  border: 2px solid #daa520;
  background-color: #332a26;
  padding: 2.5px;
}

.confirm-class-info {
  display: flex;
  flex-direction: column;
}

.confirm-class-name {
  font-size: 18px;
  color: #daa520;
  font-weight: bold;
  margin-bottom: 2.5px;
}

.confirm-class-level {
  font-size: 14px;
  color: #e0c999;
}

.confirm-attributes-container {
  padding: 10px;
  margin-bottom: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  border: 1px solid rgba(218, 165, 32, 0.2);
  flex: 1; /* 让它占据更多空间 */
  overflow-y: visible; /* 确保内容不会被截断 */
}

.confirm-attribute-row {
  display: flex;
  flex-direction: column;
  padding: 8px 6px 5px;
  border-bottom: 1px solid rgba(218, 165, 32, 0.15);
  margin-bottom: 5px;
  border-radius: 4px;
  background-color: rgba(37, 33, 28, 0.4);
}

.confirm-attribute-row:hover,
.confirm-attribute-row:active {
  background-color: rgba(37, 33, 28, 0.6);
}

.confirm-attribute-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* 属性标题行样式优化 */
.confirm-attribute-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 5px 4px;
  border-radius: 3px;
}

.confirm-attribute-name {
  font-size: 17px;
  color: #e0c999;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.confirm-total-value {
  font-size: 20px;
  color: #daa520;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  margin-right: 7.5px;
}

/* 下拉箭头样式优化 */
.dropdown-arrow {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e0c999;
  font-size: 13px;
  transition: all 0.3s ease;
  border-radius: 50%;
  background-color: rgba(218, 165, 32, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dropdown-arrow.expanded {
  transform: rotate(180deg);
  color: #ffffff;
  background-color: rgba(218, 165, 32, 0.3);
}

/* 属性详情内容样式优化 */
.confirm-attribute-details {
  margin-top: 6px;
  padding: 7.5px 6px;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  border: 1px solid rgba(218, 165, 32, 0.1);
  animation: fadeIn 0.3s ease;
}

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

/* 属性汇总区域样式优化 */
.attribute-summary-section {
  background-color: rgba(37, 33, 28, 0.5);
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 3px solid rgba(218, 165, 32, 0.4);
}

.attribute-summary-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #e0e0e0;
  padding: 4px 5px;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.attribute-summary-item:first-child {
  background-color: rgba(218, 165, 32, 0.1);
  border-bottom: 1px solid rgba(218, 165, 32, 0.2);
  padding: 5px 5px;
}

.summary-label {
  font-weight: normal;
  color: #b8b8b8;
}

.attribute-summary-item:first-child .summary-label {
  color: #e0c999;
  font-weight: bold;
}

.summary-value {
  font-weight: bold;
  min-width: 30px;
  text-align: right;
}

.attribute-summary-item:first-child .summary-value {
  color: #e0c999;
  font-size: 16px;
}

.positive-value {
  color: #4CAF50;
}

.negative-value {
  color: #FF5252;
}

/* 属性详情部分样式优化 */
.attribute-detail-section {
  margin-bottom: 9px;
  border-bottom: 1px solid rgba(150, 116, 49, 0.2);
  padding-bottom: 8px;
}

.attribute-detail-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.attribute-detail-title {
  font-size: 13px;
  color: #daa520;
  margin-bottom: 6px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.attribute-detail-title:before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 12px;
  background-color: #daa520;
  margin-right: 5px;
  border-radius: 2px;
}

.attribute-detail-content {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  padding: 4px;
}

.attribute-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 5px;
  margin: 2px 0;
  border-bottom: 1px dotted rgba(218, 165, 32, 0.1);
}

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

.detail-label {
  font-size: 12px;
  color: #b8b8b8;
}

.detail-value {
  font-size: 13px;
  font-weight: bold;
  min-width: 30px;
  text-align: right;
}

/* 属性加成类别样式 */
.attribute-bonus-category {
  margin-top: 6px;
  margin-bottom: 3px;
  padding-left: 5px;
  border-left: 2px solid rgba(218, 165, 32, 0.3);
}

.bonus-category-name {
  font-size: 12px;
  color: #daa520;
  font-weight: bold;
}

/* 属性简要汇总样式 */
.attribute-summary-brief {
  display: flex;
  flex-direction: column;
  padding: 4px 10px;
  margin: 2.5px 0 4px;
  background-color: rgba(37, 33, 28, 0.5);
  border-left: 3px solid rgba(218, 165, 32, 0.3);
}

.attribute-brief-item {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 3px 0;
  position: relative;
}

.attribute-brief-item:first-child {
  margin-bottom: 3px;
}

.attribute-brief-item:not(:first-child) {
  border-top: 1px solid rgba(218, 165, 32, 0.1);
  padding-top: 4px;
}

.brief-label {
  color: #b8b8b8;
}

.brief-value {
  font-weight: bold;
  color: #e0c999;
}

.brief-value.positive-value {
  color: #4CAF50;
}

.brief-value.negative-value {
  color: #FF5252;
}

.attribute-value-container {
  display: flex;
  align-items: center;
}

/* 下拉箭头样式优化 */
.dropdown-arrow {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e0c999;
  font-size: 13px;
  transition: all 0.3s ease;
  border-radius: 50%;
  background-color: rgba(218, 165, 32, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 展开后的属性详情样式 */
.expanded-attribute-section {
  margin-bottom: 10px;
  padding-bottom: 5px;
  position: relative;
  border-bottom: 1px solid rgba(218, 165, 32, 0.1);
}

.expanded-attribute-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.section-title-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7.5px;
  padding: 7.5px 10px;
  background-color: rgba(57, 49, 41, 0.6);
  border-radius: 3px;
}

.section-title-line {
  position: absolute;
  left: 0;
  top: 7.5px;
  bottom: 7.5px;
  width: 4px;
  background-color: #daa520;
  border-radius: 2px;
}

.section-title {
  font-size: 14px;
  color: #e0c999;
  font-weight: bold;
  margin-left: 7.5px;
}

.section-value {
  font-size: 16px;
  font-weight: bold;
  color: #e0c999;
}

.section-value.positive-value {
  color: #4CAF50;
}

.section-value.negative-value {
  color: #FF5252;
}

.expanded-details-container {
  padding: 5px 10px;
  margin-left: 4px;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.attribute-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 7.5px;
  margin-bottom: 1.5px;
  border-bottom: 1px dotted rgba(218, 165, 32, 0.1);
}

.attribute-detail-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.attribute-detail-label {
  font-size: 13px;
  color: #b8b8b8;
}

.attribute-detail-value {
  font-size: 13px;
  color: #ffffff;
  font-weight: bold;
  min-width: 30px;
  text-align: right;
}

.attribute-detail-value.positive-value {
  color: #4CAF50;
}

.attribute-detail-value.negative-value {
  color: #FF5252;
}

/* 确认面板样式调整 */
.confirm-attribute-details {
  background-color: rgba(26, 23, 20, 0.5);
  border-radius: 4px;
  padding: 7.5px;
  margin-top: 5px;
  margin-bottom: 2.5px;
}

/* 确认面板相关样式 */
.confirm-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-height: 80vh;
  background-color: #221a18;
  border-radius: 6px;
  border: 2px solid #daa520;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  flex-direction: column;
}

/* 滚动视图样式 */
.confirm-panel-scroll {
  flex: 1;
  overflow: hidden;
  max-height: calc(80vh - 100px); /* 减去头部和底部高度 */
}

.confirm-panel-body {
  padding: 10px;
}

/* 确认面板底部样式 */
.confirm-panel-footer {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  border-top: 1px solid rgba(218, 165, 32, 0.3);
  background-color: rgba(0, 0, 0, 0.2);
}

.confirm-panel-btn {
  width: 40%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  font-size: 15px;
  font-weight: bold;
}

.save-btn {
  background-color: rgba(76, 175, 80, 0.2);
  border: 1px solid rgba(76, 175, 80, 0.5);
  color: #4CAF50;
}

.share-btn {
  background-color: rgba(33, 150, 243, 0.2);
  border: 1px solid rgba(33, 150, 243, 0.5);
  color: #2196F3;
}

/* 确认面板遮罩层 */
.confirm-panel-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
}

/* 确认面板头部样式 */
.confirm-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid rgba(218, 165, 32, 0.3);
  background-color: rgba(218, 165, 32, 0.1);
}

.confirm-panel-title {
  font-size: 17px;
  color: #daa520;
  font-weight: bold;
}

.confirm-panel-close {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #e0c999;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
}

/* 确认面板属性列表样式 */
.confirm-class-info {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid rgba(218, 165, 32, 0.2);
}

.confirm-class-name {
  font-size: 16px;
  color: #daa520;
  font-weight: bold;
  margin-bottom: 4px;
}

.confirm-class-desc {
  font-size: 14px;
  color: #e0c999;
}

.confirm-attributes-list {
  margin-bottom: 10px;
}

.confirm-attribute-item {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  margin-bottom: 8px;
  border: 1px solid rgba(218, 165, 32, 0.2);
  overflow: hidden;
}

.confirm-attribute-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  position: relative;
}

.confirm-attribute-name {
  font-size: 15px;
  color: #e0c999;
  font-weight: bold;
}

.confirm-attribute-value {
  font-size: 16px;
  color: #ffffff;
  font-weight: bold;
  margin-right: 8px;
}

.confirm-attribute-arrow {
  font-size: 12px;
  color: #e0c999;
  transition: all 0.3s;
}

.confirm-attribute-arrow.expanded {
  transform: rotate(180deg);
}

.confirm-attribute-details {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 6px 8px;
  border-top: 1px solid rgba(218, 165, 32, 0.1);
}

.confirm-attribute-detail {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
  color: #e0c999;
}

.confirm-attribute-detail text:last-child {
  color: #ffffff;
}

.positive-bonus {
  color: #4CAF50 !important;
  font-weight: bold;
}

.confirm-save-btn.highlight,
.confirm-share-btn.highlight {
  background: linear-gradient(135deg, #e6b325, #c99420);
  color: #221a18;
  font-weight: bold;
  border: 1px solid #ffcc00;
  box-shadow: 0 0 7.5px rgba(218, 165, 32, 0.6);
  transform: scale(1.02);
}

/* HP和MP条样式 */
.hp-mp-display {
  margin-top: 5px;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 5px;
  padding: 5px 0;
}

.status-bar-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.status-label {
  width: 40px;
  text-align: right;
  margin-right: 7.5px;
  font-size: 14px;
  color: #e0c999;
  font-weight: bold;
}

.status-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hp-bar {
  background-color: rgba(200, 0, 0, 0.3);
  border: 1px solid rgba(255, 0, 0, 0.5);
  border-radius: 3px;
  height: 20px;
  position: relative;
  width: 100%;
  box-shadow: inset 0 0 4px rgba(200, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.mp-bar {
  background-color: rgba(0, 0, 200, 0.3);
  border: 1px solid rgba(0, 50, 200, 0.5);
  border-radius: 3px;
  height: 20px;
  position: relative;
  width: 100%;
  box-shadow: inset 0 0 4px rgba(0, 50, 200, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.hp-value-container {
  display: flex;
  align-items: center;
  height: 100%;
  position: absolute;
  left: 7.5px;
}

.hp-value, .mp-value {
  font-size: 13px;
  line-height: 20px;
  color: #ffffff;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  height: 100%;
}

/* 体力上限样式 */
.hp-limit {
  position: absolute;
  right: 7.5px;
  font-size: 12px;
  line-height: 20px;
  color: #ffcc00;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  height: 100%;
}

.level-point-allocation {
  margin-bottom: 10px;
  padding: 0; /* 移除内边距 */
  background-color: transparent; /* 移除背景色 */
  border: none; /* 移除边框 */
}

/* HP详情切换按钮样式 */
.hp-details-toggle {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(200, 0, 0, 0.2);
  border: 1px solid rgba(255, 0, 0, 0.3);
  border-radius: 10px;
  margin-left: 5px;
  cursor: pointer;
}

.toggle-icon {
  color: #ffffff;
  font-size: 10px;
}

/* HP计算详情样式 */
.hp-calculation-details {
  margin: 5px auto 10px auto; /* 使用auto左右边距实现居中 */
  padding: 7.5px;
  background-color: rgba(100, 0, 0, 0.15);
  border: 1px solid rgba(255, 0, 0, 0.2);
  border-radius: 4px;
  animation: fadeIn 0.3s ease;
  width: 92%; /* 稍微减小宽度，避免溢出 */
  box-sizing: border-box; /* 确保宽度包含内边距和边框 */
}

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

.detail-row {
  display: flex;
  margin-bottom: 4px;
  font-size: 12px;
  color: #e0c999;
  width: 100%;
  flex-wrap: nowrap;
  align-items: center; /* 改为垂直居中 */
}

.detail-label {
  min-width: 85px; /* 进一步减小标签宽度 */
  width: 85px;
  text-align: right;
  margin-right: 10px;
  color: #F5F5F7;
  white-space: nowrap;
  flex-shrink: 0;
}

.detail-value {
  flex: 1;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  padding-right: 5px;
}

/* 为等级体力计算行添加特殊样式，由于内容多，调小字体 */
.detail-row:nth-child(6) .detail-value {
  font-size: 11px;
}

/* 增加容器内部的内边距，使整体更协调 */
.hp-calculation-details {
  padding: 10px;
}

/* 调整总体力和职业体力上限的样式，使其更突出 */
.detail-row.total {
  margin-top: 6px;
  border-top: 1px solid rgba(255, 0, 0, 0.3);
  padding-top: 6px;
  font-weight: bold;
}

.detail-value.highlight {
  color: #ffcc00;
  font-weight: bold;
}

/* 确保最后一行没有底部间距 */
.detail-row:last-child {
  margin-bottom: 0;
}

/* 升级点数体质加成样式 */
.detail-section-title {
  font-size: 12px;
  color: #F5F5F7;
  margin: 7.5px 0 5px 0;
  border-bottom: 1px dashed rgba(255, 0, 0, 0.2);
  padding-bottom: 2.5px;
}

.mp-value-container {
  display: flex;
  align-items: center;
  height: 100%;
  position: absolute;
  left: 7.5px;
}

/* 随机体力计算行样式 */
.detail-row.random-hp {
  margin-top: 5px;
  background-color: rgba(255, 165, 0, 0.1);
  border-radius: 3px;
  padding: 6px;
  border: 1px dashed rgba(255, 165, 0, 0.3);
}

.random-hp-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.random-hp-title {
  color: #ffcc00;
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 5px;
  text-align: left;
}

.random-hp-content {
  display: flex;
  flex-direction: column;
  color: #ffcc00;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  line-height: 1.6;
  width: 100%;
  padding-left: 10px;
}

.random-hp-content view {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* 体力区间值的醒目红色样式 */
.hp-range-value {
  color: #ff3333;
  font-weight: bold;
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  display: inline;
  margin-left: 0;
}

.hp-range-row {
  display: flex !important;
  flex-direction: row !important;
  white-space: nowrap !important;
  width: 100%;
}