/* ============================================================
   hud.css
   Heads-Up Display (HUD): skor, nyawa/hati, timer bar,
   nomor soal, dan progress dots pelacak soal.
   ============================================================ */

/* ── HUD Container ── */
#hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.hud-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hud-label {
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: 'Orbitron', monospace;
}

.hud-value {
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent);
}

/* ── Hearts / Nyawa ── */
.hearts {
  display: flex;
  gap: 6px;
}

.heart {
  font-size: 1.4rem;
  transition: transform .3s, opacity .3s;
  filter: drop-shadow(0 0 6px #ff3366);
}

.heart.lost {
  opacity: .2;
  filter: none;
  transform: scale(.8);
}

.heart.shake {
  animation: heartShake .35s ease;
}

@keyframes heartShake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-8px); }
  75%      { transform: translateX(8px); }
}

/* ── Timer Bar ── */
#timer-bar-wrap {
  width: 100%;
  height: 8px;
  background: var(--bg2);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}

#timer-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--green), var(--accent));
  transition: width .1s linear, background .5s;
  border-radius: 4px;
}

#timer-bar.urgent {
  background: linear-gradient(90deg, var(--red), var(--yellow));
}

/* ── Progress Dots ── */
#progress-track {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.prog-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  transition: background .3s, transform .3s;
}

.prog-dot.done-ok  { background: var(--green); }
.prog-dot.done-err { background: var(--red); }
.prog-dot.active   { background: var(--accent); transform: scale(1.4); }