.hud {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 30;
  padding: calc(8px + var(--safe-top)) 12px 8px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  display: none;
}
.hud.show { display: block; }

.hud-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.hud-row + .hud-row { margin-top: 6px; }

.mb-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px;
  background: var(--c-purple);
  color: #fff;
  border-radius: 100px;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: var(--t-14);
  letter-spacing: 0.02em;
}
.mb-pill .mb-unit { font-size: 11px; font-weight: 700; opacity: 0.85; }
.mb-pill.pop { animation: mbPop 0.5s var(--spring-bouncy); }
@keyframes mbPop {
  0%, 100% { transform: scale(1); }
       40% { transform: scale(1.22); background: var(--c-pink); }
}

.lives { display: flex; gap: 4px; align-items: center; }
.life  { width: 14px; height: 18px; display: inline-block; transition: opacity 0.3s; }
.life svg { width: 100%; height: 100%; }
.life.lost { opacity: 0.18; filter: grayscale(1); animation: shake 0.4s; }
.life-heart { font-size: 18px; transition: opacity 0.3s; }
.life-heart.lost { opacity: 0.25; filter: grayscale(1); }

.icon-btn {
  background: transparent; border: none;
  color: var(--c-ink-soft);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  transition: background 0.15s, transform 0.12s;
}
.icon-btn:active { transform: scale(0.92); background: var(--c-line); }
.icon-btn svg { width: 18px; height: 18px; }

.score-cards {
  display: flex; align-items: stretch; gap: 10px;
}
.score-card {
  display: flex; flex-direction: column; align-items: center;
  background: var(--c-line);
  border-radius: 8px;
  padding: 4px 14px;
  min-width: 80px;
}
.score-label {
  font-size: var(--t-11);
  color: var(--c-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
}
.score-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: var(--t-24);
  color: var(--c-ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  display: inline-block;
}
.score-num.pop { animation: scorePop 0.3s var(--spring-snappy); }
@keyframes scorePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); color: var(--c-pink); }
  100% { transform: scale(1);    color: var(--c-ink);  }
}

.reward-progress {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  font-size: var(--t-11);
  color: var(--c-ink-soft);
}
.rp-track {
  flex: 1; height: 4px;
  background: var(--c-line);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.rp-fill {
  height: 100%;
  background: var(--c-pink);
  border-radius: 100px;
  width: 0%;
  transition: width 0.4s var(--ease-out);
}
.rp-target { font-weight: 800; color: var(--c-pink); }

.home-dots {
  display: flex; gap: 8px; align-items: center;
}
.home-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-line);
  transition: background 0.3s var(--spring-snappy), transform 0.3s var(--spring-bouncy);
}
.home-dot.filled {
  background: var(--c-success);
  transform: scale(1.3);
}