.torch {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  transition: background 0.15s;
}

.torch:hover {
  background: rgba(var(--gold-rgb), 0.1);
}

.icon {
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.4;
  transition: opacity 0.3s;
}

.lit .icon {
  opacity: 1;
}

.out .icon {
  opacity: 0.25;
}

.time {
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--gold);
  min-width: 1.8rem;
}

.warning .time {
  color: var(--warning);
}

.danger .time {
  color: var(--danger);
  animation: pulse 1s ease-in-out infinite;
}

.critical .time {
  color: var(--danger);
  animation: pulse 0.5s ease-in-out infinite;
}

.critical .icon {
  animation: flicker 0.3s ease-in-out infinite;
}

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

@keyframes flicker {
  0%,
  100% {
    opacity: 1;
  }
  25% {
    opacity: 0.3;
  }
  75% {
    opacity: 0.8;
  }
}
