/* hud.css - 最终12小时 V1.0 HUD专属样式（补充main.css） */

/* ------------------------------ */
/* 血条精细化样式 */
/* ------------------------------ */
/* 血条背景纹理（模拟金属质感） */
.health-bar > div {
  background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8);
}

/* 血条进度渐变增强 */
#health-progress {
  background: linear-gradient(90deg, 
    #d62828 0%, 
    #f77f00 50%, 
    #e9c46a 80%, 
    #f77f00 100%);
  position: relative;
  overflow: hidden;
}

/* 血条流动光效（装饰性） */
#health-progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    rgba(255, 255, 255, 0) 100%);
  animation: health-glow 2s linear infinite;
}

@keyframes health-glow {
  0% { transform: translateX(0); }
  100% { transform: translateX(200%); }
}

/* 低血量警告样式（JS控制添加类名） */
#health-progress.low-health {
  background: linear-gradient(90deg, #ff0000, #cc0000);
  animation: health-pulse 1s ease-in-out infinite alternate;
}

@keyframes health-pulse {
  0% { opacity: 1; }
  100% { opacity: 0.7; }
}

/* ------------------------------ */
/* 压力值精细化样式 */
/* ------------------------------ */
/* 压力值背景纹理 */
.stress-bar > div {
  background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8);
}

/* 压力值不同状态的渐变增强 */
#stress-progress {
  background: linear-gradient(90deg, #06d6a0, #118ab2, #073b4c);
}

/* 轻度焦虑（100-200） */
#stress-progress.stress-warning {
  background: linear-gradient(90deg, #ffd166, #f7931e, #e63946);
}

/* 极度焦虑（200-300） */
#stress-progress.stress-danger {
  background: linear-gradient(90deg, #ef476f, #ff0000, #8b0000);
  animation: stress-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes stress-pulse {
  0% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0.8; transform: scaleX(1.02); }
}

/* 压力值进度条装饰光效 */
#stress-progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.2) 50%, 
    rgba(255, 255, 255, 0) 100%);
  animation: stress-glow 3s linear infinite;
}

@keyframes stress-glow {
  0% { transform: translateX(0); }
  100% { transform: translateX(200%); }
}

/* ------------------------------ */
/* 玩家状态列表精细化 */
/* ------------------------------ */
#player-states {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* 多玩家状态项样式（联机扩展） */
.player-state-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.player-name {
  font-weight: bold;
  color: #ffffff;
}

.player-hp {
  color: #e73030;
}

.player-stress {
  color: #00ff00;
}
/* 玩家压力值警告/危险态 */
.player-stress.warning {
  color: #ffcc00;
}
.player-stress.danger {
  color: #ff0000;
}

/* ------------------------------ */
/* HUD图标精细化 */
/* ------------------------------ */
.health-bar img, .stress-bar img {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
  transition: transform 0.2s ease;
}

.health-bar:hover img, .stress-bar:hover img {
  transform: scale(1.1);
}

/* 低血量时血条图标变红 */
.health-bar.low-health img {
  filter: drop-shadow(0 0 4px #ff0000);
}

/* 高压力时压力值图标变红 */
.stress-bar.high-stress img {
  filter: drop-shadow(0 0 4px #ff0000);
}

/* ------------------------------ */
/* 数值文本精细化 */
/* ------------------------------ */
#health-value, #stress-value {
  font-family: "Consolas", "Monaco", monospace;
  letter-spacing: 1px;
}

/* 数值变化动画 */
.value-change {
  animation: value-pop 0.3s ease-out;
}

@keyframes value-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ------------------------------ */
/* 适配小屏幕HUD压缩 */
/* ------------------------------ */
@media (max-width: 768px) {
  #hud-container {
    gap: 10px;
  }
  
  .health-bar, .stress-bar {
    min-width: 220px;
    gap: 8px;
  }
  
  .health-bar img, .stress-bar img {
    width: 28px;
    height: 28px;
  }
  
  .health-bar > div, .stress-bar > div {
    width: 150px;
    height: 20px;
  }
  
  #health-value, #stress-value {
    font-size: 16px;
    min-width: 50px;
  }
  
  #player-states {
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* 超小屏幕（平板/手机横屏） */
@media (max-width: 480px) {
  #hud-container {
    top: 5px;
    left: 5px;
  }
  
  .health-bar, .stress-bar {
    min-width: 180px;
  }
  
  .health-bar > div, .stress-bar > div {
    width: 120px;
  }
}