body { 
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
  }

  .container { 
    max-width: 600px; 
    margin: 20px auto; 
    padding: 20px; 
    background: #fff; 
    border-radius: 8px; 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  }

  h1 {
    text-align: center;
    font-size: 22px;
    margin-bottom: 15px;
  }

  .form-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .form-group label {
    flex: 1;
    font-size: 14px;
    margin-right: 5px;
  }

  .form-group input, .form-group select {
    flex: 1;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }

  button#queryButton {
    background-color: #4CAF50;
    color: white;
    margin-top: 10px;
  }

  button#queryButton:hover {
    background-color: #388E3C;
  }

  button#hitButton {
    background-color: #f44336;
    color: white;
    margin-top: 10px;
  }

  button#hitButton:hover {
    background-color: #d32f2f;
  }

  fieldset {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 10px 0;
    padding: 10px;
    background: #fafafa;
  }

  legend {
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }

  .output {
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    background: #f9f9f9;
    font-size: 14px;
  }

  .hit-results { 
    background: #e3f2fd; 
    border-left: 4px solid #2196F3; 
    padding: 10px;
    margin-top: 10px;
  }

  .hit-red {
    color: #ff0000;
    font-weight: 600;
    display: inline-block; /* 方框必备属性 */
    padding: 2px 5px;
    margin: 0 2px;
    border: 2px solid #f22727; /* 红色边框 */
    border-radius: 4px; /* 圆角方框 */
    background-color: #e0b3a8; /* 浅红色色背景 */
  }

  .hit-green {
    color: #157416;
    font-weight: 600;
    display: inline-block; /* 方框必备属性 */
    padding: 2px 5px;
    margin: 0 2px;
    border: 2px solid #45e202; /* 红色边框 */
    border-radius: 4px; /* 圆角方框 */
    background-color: #c1e1b3; /* 浅红色色背景 */
  }

  /* 哑弹蓝色方框样式 */
  .dud-blue {
    color: #4365eb; /* 蓝色文字 */
    font-weight: 600;
    text-decoration: line-through;
    display: inline-block; /* 方框必备属性 */
    padding: 2px 5px;
    margin: 0 2px;
    border: 2px solid #4365eb; /* 蓝色边框 */
    border-radius: 4px; /* 圆角方框 */
    background-color: #f0f4ff; /* 浅蓝色背景 */
  }

  /* 哑弹蓝色方框样式 */
  .de-yellow {
    color: #54534e; /* 蓝色文字 */
    font-weight: 600;
    display: inline-block; /* 方框必备属性 */
    padding: 2px 5px;
    margin: 0 2px;
    border: 2px solid #7c7d80; /* 蓝色边框 */
    border-radius: 4px; /* 圆角方框 */
    background-color: #edeb79; /* 浅蓝色背景 */
  }


  /* 添加加载状态提示 */
.combined-select {
  position: relative;
}

.loading::after {
  content: "加载中...";
  position: absolute;
  right: 10px;
  color: #666;
}

.reverse-target {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.reverse-target button {
  padding: 8px 16px;
  background-color: #5598e0;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.reverse-target button:hover {
  background-color: #0056b3;
}

.reverse-target #targetStatus {
  font-size: 16px;
  color: #292dfa;
  font-weight: bold;
}

/* DE结果样式 */
.de-results {
  border-left: 3px solid #4a5568;
  padding-left: 1em;
  margin: 0.8em 0;
}

.de-item {
  margin: 0.5em 0;
  line-height: 1.6;
}

.de-code {
  /* 文字样式 */
  color: #000 !important;          /* 强制黑色文字 */
  font-weight: 700;                /* 保持加粗 */
  font-family: 'Courier New', monospace;
  
  /* 背景样式 */
  background: #ffeb3b !important; /* 明黄色背景 */
  background: linear-gradient(
    to bottom, 
    #fff176 0%,                   /* 浅黄 */
    #ffeb3b 100%                  /* 标准黄 */
  ) !important;                   /* 渐变增强立体感 */
  
  /* 边框效果 */
  border: 2px solid #fbc02d !important; /* 琥珀色边框 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 微妙投影 */
  
  /* 布局调整 */
  padding: 0.25em 0.6em;          /* 增加内边距 */
  border-radius: 4px;             /* 更大圆角 */
  display: inline-block;          /* 确保背景包裹内容 */
  margin-right: 0.8em;            /* 增加右侧间距 */
  
  /* 文字特效 */
  text-shadow: 0 1px 1px rgba(255,255,255,0.3); /* 提升可读性 */
}

/* 新增2系样式 */
.de-code.de-code-2 {
  color: #000 !important;
  background: #2d9cf7 !important;
  background: linear-gradient(
    to bottom,
    #73b7ef 0%,
    #42a1ef 100%
  ) !important;
  border-color: #1976D2 !important;
}

/* 新增3系样式 */
.de-code.de-code-3 {
  color: #000 !important;
  background: #e2bce4fe !important;
  background: linear-gradient(
    to bottom,
    #e2bce4fe 0%,
    #e2bce4fe 100%
  ) !important;
  border-color: #eb72f1fe !important;
}


/* DE描述文本 */
.de-desc {
  color: #0513db;
  font-size: 1em;
  flex: 1; /* 自动填充剩余空间 */
  text-wrap: pretty; /* 智能换行 */
}


/* 浮动工具样式 */
.floating-tool {
  position: absolute;
  top: 200px;
  left: 30px;
  background: #ffffff;
  border: 2px solid #4CAF50;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 1000;
  min-width: 280px;
  user-select: none;
  touch-action: none; /* 防止触摸滚动冲突 */
}

.tool-header {
  background: #4CAF50;
  color: white;
  padding: 10px;
  cursor: move;
  border-radius: 6px 6px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close-btn {
  cursor: pointer;
  font-size: 24px;
  padding: 0 8px;
}

.tool-body {
  padding: 15px;
}

.dice-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.dice-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.1s;
}

.dice-btn:hover {
  transform: scale(1.05);
}

.dice-result {
  margin-top: 15px;
  min-height: 60px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
  text-align: center;
  font-size: 24px;
  position: relative;
}


/* 损伤动画 */
.damage-animation {
  animation: damageFlash 0.5s;
}

@keyframes damageFlash {
  0% { background-color: #ffeb3b; }
  50% { background-color: #ff5722; }
  100% { background-color: transparent; }
}

.damage-result {
  border: 2px solid #f44336;
  border-radius: 4px;
  padding: 15px;
  margin: 10px 0;
  background: #fff3e0;
}

.damage-result h3 {
  color: #d32f2f;
  margin-top: 0;
}

/* 查询DE添加样式 */
/* 垂直布局容器 */
.de-query-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 鱼雷DE：T结果区域独立成行 */
/* T：强调样式 */
.t-effect {
  color: #d32f2f;  /* 红色强调 */
  font-weight: 600;
  background-color: #fff3e0;  /* 浅橙色背景 */
  padding: 2px 4px;
  border-radius: 3px;
  font-style: italic; /* 可选的斜体效果 */
}

/* 火炮DE：T结果区域独立成行 */
.pre-t {
  color: #c62828; /* 深红色 */
  font-weight: 600;
  background-color: #fff3e0;  /* 浅橙色背景 */
  padding: 2px 4px;
  border-radius: 3px;
  font-style: italic; /* 可选的斜体效果 */
}

/* 新增全文本强调样式 */
.full-emphasis {
  color: #c62828; /* 深红色 */
  font-weight: bold;
  background-color: #fff3e0;
  padding: 2px 4px;
  border-radius: 3px;
}

/* DE代码样式 */
.de-code {
  font-family: monospace;
  color: #2e7d32;  /* 深绿色 */
  margin-right: 10px;
}

/* 结果框动画 */
.highlight {
  animation: fadeHighlight 1.5s;
}
@keyframes fadeHighlight {
  from { background-color: #fff9c4; }
  to { background-color: white; }
}


/* 输入行保持水平排列 */
.de-input-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

/* 输入框自适应 */
#deCode {
  flex: 1;
  padding: 6px;
  border: 1px solid #ccc;
}

/* 结果区域独立成行 */
.de-result-area {
  margin-top: 10px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #ddd;
}

/* 多DE结果样式 */
.de-result-area hr {
  margin: 15px 0;
  border: 0;
  border-top: 1px dashed #9fced0;
}

.de-item {
  padding: 12px;
  border-radius: 6px;
  background-color: rgba(159, 206, 208, 0.1);
  margin: 10px 0;
}

.de-item.error {
  background-color: rgba(255, 99, 71, 0.1);
  color: #ff6347;
}




/* 骰子结果动画 */
@keyframes diceRoll {
  0% { transform: rotate(0deg); opacity: 0; }
  50% { transform: rotate(180deg); opacity: 1; }
  100% { transform: rotate(360deg); opacity: 1; }
}

.dice-result {
  min-height: 60px;
  padding: 5px;
  background: #f8f9fa;
  border-radius: 5px;
  text-align: center;
  position: relative;
  transition: background-color 0.3s;
}

.result-number {
  font-size: 50px;
  font-weight: bold;
  color: #5a5c99;
  animation: diceRoll 0.6s ease-out;
}

.result-text {
  color: #666;
  margin-top: 8px;
  font-size: 14px;
}

.result-placeholder {
  color: #c54040;
  font-style: italic;
}

/* 骰子按钮悬停效果 */
.dice-btn:hover {
  background: linear-gradient(145deg, #2980b9, #2472a4);
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

/* 紧凑版骰子工具 */
.floating-tool {
  min-width: 100px;  /* 宽度缩小25% */
  
  transform: scale(0.9); /* 整体缩放 */
}

.tool-header {
  background: linear-gradient(145deg, #2c3e50, #34495e); /* 深蓝渐变 */
  color: #ecf0f1;
  border-bottom: 1px solid #3d566e; /* 添加分隔线 */
}

  .dice-btn {
    background: linear-gradient(145deg, #3498db, #2980b9); /* 按钮蓝色渐变 */
    color: white;
    border: 1px solid #0697f8; /* 添加边框 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

.dice-options {
  gap: 8px;           /* 按钮间隙缩小 */
  margin-top: 8px;
}

.dice-btn {
  padding: 6px;       /* 按钮内边距减小 */
  font-size: 12px;    /* 按钮文字缩小 */
  min-width: 60px;    /* 最小宽度限制 */
}

.dice-result {
  background: #f8f9fa;
  border: 2px solid #e0e7ee; /* 浅灰边框 */
  color: #436d96;           /* 深蓝文字 */
}

.result-number {
  color: #e74c3c;           /* 强调红色 */
  text-shadow: 0 2px 2px rgba(231, 76, 60, 0.2);
}

.close-btn:hover {
  color: #e74c3c;           /* 悬停变红 */
}


.result-text {
  font-size: 12px;    /* 结果文字缩小 */
}

/* ===== 新增状态指示 ===== */
.result-number::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="%23e74c3c"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
  margin: 8px auto;
  opacity: 0.8;
}