/* ===========================================
   距离面板组件样式
   =========================================== */

.distance-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.distance-item {
  background: var(--parchment-light);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-sm);
  box-shadow: var(--shadow-soft);
}

.distance-item__bar {
  height: 8px;
  background: var(--parchment-dark);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--spacing-xs);
}

.distance-item__fill {
  height: 100%;
  border-radius: 4px;
  transition: width var(--transition-normal);
}

/* 总路程 - 黑色 */
.distance-item--total .distance-item__fill {
  background: var(--ink-color);
}

/* 剩余距离 - 蓝色 */
.distance-item--remaining .distance-item__fill {
  background: var(--player-color);
}

/* 双方距离 - 红色 */
.distance-item--between .distance-item__fill {
  background: var(--accent-red);
}

.distance-item__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.distance-item__label {
  font-size: var(--font-size-xs);
  color: var(--ink-faded);
  margin-bottom: 2px;
}

.distance-item__value {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: bold;
  color: var(--ink-color);
  line-height: 1;
}

.distance-item__unit {
  font-size: var(--font-size-xs);
  color: var(--ink-light);
}

/* 状态样式 */
.distance-item--warning {
  border-color: var(--warning-color);
}

.distance-item--warning .distance-item__value {
  color: var(--warning-color);
}

.distance-item--danger {
  border-color: var(--error-color);
  animation: pulse-danger 1s ease-in-out infinite;
}

.distance-item--danger .distance-item__value {
  color: var(--error-color);
}

@keyframes pulse-danger {
  0%, 100% {
    box-shadow: var(--shadow-soft);
  }
  50% {
    box-shadow: 0 0 12px rgba(139, 20, 20, 0.4);
  }
}