/* ==========================================================================
   ring.css — the record. Circles exist only once earned; they overlap
   into a flower whose center is left empty by the arrangement itself.
   ========================================================================== */

#hud {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: 14px;
  z-index: 55;
  width: 120px;
  height: 120px;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 700ms ease, transform 700ms ease;
  pointer-events: none;
}
#hud.show { opacity: 1; transform: none; }

.hud-svg { width: 100%; height: 100%; overflow: visible; display: block; }

/* an earned circle — ink line, no fill, so the overlaps read like petals */
.hud-node-c {
  fill: none;
  stroke: var(--lit);
  stroke-width: 1.4;
  opacity: 0.9;
}

@media (max-width: 560px) {
  #hud { width: 88px; height: 88px; top: max(8px, env(safe-area-inset-top)); right: 10px; }
}