/* HUD: progress, hint, multiplayer banner and scores, pings, notices */

.hud {
  position: fixed;
  top: calc(16px + var(--safe-top));
  left: 16px;
  max-width: calc(100% - 330px);
  color: var(--hud-text);
  font: 14px/1.5 monospace;
  pointer-events: none;
  text-shadow: 0 0 4px #000;
  z-index: 1;
}

.hud-hint {
  color: var(--hud-dim);
  font-size: 12px;
}


/* HUD: multiplayer banner and scoreboard */
.hud-collected {
  display: grid;
  gap: 1px;
  margin: 2px 0 4px;
  font-size: 13px;
}

.hud-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hud-banner {
  color: var(--accent);
  font-weight: 600;
}

.hud-scores {
  display: grid;
  gap: 2px;
  margin: 4px 0;
  font-size: 13px;
}

.hud-score {
  display: grid;
  grid-template-columns: 10px 12ch auto 7ch;
  justify-content: start;
  align-items: center;
  gap: 8px;
}

.hud-score.is-local {
  font-weight: 700;
}

.hud-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.hud-score-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--hud-dim);
}


/* ping next to each player, notices (joined / left / connection lost) */
.hud-ping {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--hud-dim);
}

.hud-notice {
  color: var(--accent);
  opacity: 0.85;
}

/* single player: "Paused" at the bottom while Space has paused it */
.pause-hint {
  position: fixed;
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  color: var(--hud-dim);
  font: 12px monospace;
  letter-spacing: 0.04em;
  pointer-events: none;
  z-index: 1;
}

.pause-hint.is-paused {
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--accent);
  font-weight: 700;
}

.pause-hint[hidden] {
  display: none;
}

/* no keyboard: no Space */
@media (hover: none) {
  .pause-hint {
    display: none;
  }
}