.md-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--ink);
  zoom: var(--ui); /* smaller on touch screens and phones (shared/style.css) */
}
.md-hud.is-intro .md-top,
.md-hud.is-intro .md-hint,
.md-hud.is-over .md-task-wrap { visibility: hidden; }

.md-top {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: var(--inset-l);
  right: var(--inset-r);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
}

/* ---------- pixel hearts ---------- */
.md-hearts { grid-column: 1; display: flex; gap: 6px; }
.md-heart { position: relative; }
.md-heart .full { position: absolute; inset: 0; }
.md-heart .full.drop { animation: md-heart-drop 1s steps(10) forwards; }
@keyframes md-heart-drop {
  0% { transform: none; }
  20% { transform: scale(1.3); }
  100% { transform: translateY(260px) rotate(90deg) scale(0.6); opacity: 0; }
}

/* ---------- task: the numbers are the star, big and clean ---------- */
.md-task-wrap { grid-column: 2; justify-self: center; }
.md-task {
  padding: 0.05em 0.55em;
  font-family: var(--num-font);
  font-weight: bold;
  font-size: clamp(44px, 7.5vw, 96px);
  line-height: 1.2;
  white-space: nowrap;
  color: #1d2433;
}
.md-task.long { font-size: clamp(30px, 5.2vw, 72px); }
.md-task .op.dot {
  width: 0.2em;
  height: 0.2em;
  margin: 0 0.25em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  transform: none;
}
.md-task .op { display: inline-block; margin: 0 0.12em; transform: scaleX(1.3); }
.md-task .ans { display: inline-block; min-width: 1.1em; text-align: center; color: #ff7b00; }
.md-task.reveal .ans { color: #1fb75a; }
.md-task.pop { animation: md-pop 0.3s steps(4); }
.md-task.shake { animation: md-shake 0.5s steps(6); }
@keyframes md-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes md-shake {
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

/* ---------- score ---------- */
.md-score {
  grid-column: 3;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.md-points {
  min-width: 1.2em;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1;
  text-align: center;
}
.md-points-frame.bump { animation: md-pop 0.3s steps(4); }
.md-best {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(18px, 2vw, 24px);
  color: #fff;
  text-shadow: 0 3px 0 var(--ink);
}

/* ---------- praise (pixel word) ---------- */
.md-praise {
  position: absolute;
  top: 28%;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
}
.md-praise.show { animation: md-praise 1.1s steps(11) forwards; }
@keyframes md-praise {
  0% { opacity: 0; transform: scale(0.4); }
  20% { opacity: 1; transform: scale(1.1); }
  35% { transform: scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-40px); }
}

/* ---------- control hint ---------- */
.md-hint {
  position: absolute;
  left: var(--inset-l);
  bottom: var(--inset-b);
}
.md-hint .px-box,
.md-controls span { gap: 6px; }
.md-gap { width: 12px; }

/* ---------- overlays ---------- */
.md-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  pointer-events: auto;
  background: rgba(36, 48, 74, 0.3);
}
.md-overlay.intro {
  align-items: start;
  padding-top: max(18px, 5vh);
  background: none;
}
.md-panel {
  flex-direction: column;
  gap: 26px;
  padding: clamp(22px, 4vw, 40px) clamp(26px, 5vw, 52px);
}
.md-overlay > .px-frame { --step: 9px; animation: md-pop 0.3s steps(4); }
.md-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 36px; }
.md-controls span { display: inline-flex; align-items: center; }
.md-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.md-record { animation: px-blink-soft 0.6s steps(2) infinite; }
@keyframes px-blink-soft {
  50% { opacity: 0.35; }
}
.md-result {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: clamp(64px, 10vw, 110px);
  line-height: 1;
}
.md-result-best {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -10px;
  font-size: clamp(22px, 2.6vw, 30px);
  opacity: 0.8;
}

/* a phone held sideways (see shared/game.css) */
@media (max-height: 500px) {
  .md-top { top: max(14px, env(safe-area-inset-top)); gap: 10px; }
  .md-task { font-size: 54px; }
  .md-task.long { font-size: 40px; }
  .md-points { font-size: 36px; }
  .md-best { font-size: 20px; }
  .md-score { gap: 10px; }
  .md-panel { gap: 18px; padding: 18px 30px; }
  .md-overlay.intro { padding-top: 14px; }
  .md-result { font-size: 84px; }
  .md-result-best { font-size: 24px; }
}