/* The readout, meter and toasts that float over the canvas.
   All pointer-events: none -- nothing here is interactive. */

/* ---- floating readout, top-left ---- */
#hud {
  position: fixed; top: 28px; left: 32px; z-index: 5;
  pointer-events: none; text-shadow: 0 2px 24px rgba(0,0,0,0.8);
}
#hud .label {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
#raised {
  font: 600 clamp(34px, 5.2vw, 72px)/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: #fff;
}
#goalline { font-size: 13px; color: var(--muted); margin-top: 8px; }
#goalline b { color: var(--accent); font-weight: 600; }

/* ---- progress arc, bottom-left ---- */
#meter {
  position: fixed; left: 32px; bottom: 30px; z-index: 5;
  width: min(38vw, 420px); pointer-events: none;
}
#track {
  height: 3px; background: rgba(255,255,255,0.10); border-radius: 2px;
  overflow: visible; position: relative;
}
#fill {
  height: 100%; width: 0%; border-radius: 2px;
  background: linear-gradient(90deg, #f0a84a, #f7dc8a);
  box-shadow: 0 0 18px rgba(243,201,105,0.85), 0 0 42px rgba(243,201,105,0.4);
  transition: width .9s cubic-bezier(.22,.9,.3,1);
}
/* the 100% mark — past it we are into over-saturation territory */
#mark {
  position: absolute; top: -5px; left: 50%; width: 1px; height: 13px;
  background: rgba(255,255,255,0.35);
}
#meterlabels {
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: .1em; color: var(--muted); margin-top: 9px;
}

/* ---- donation toasts, bottom-right ---- */
#feed {
  position: fixed; right: 30px; bottom: 30px; z-index: 5;
  display: flex; flex-direction: column-reverse; gap: 9px;
  align-items: flex-end; pointer-events: none;
}
.toast {
  background: rgba(16,14,24,0.78); border: 1px solid rgba(243,201,105,0.35);
  border-radius: 999px; padding: 9px 18px;
  backdrop-filter: blur(10px);
  display: flex; align-items: baseline; gap: 10px;
  animation: pop .5s cubic-bezier(.2,1.3,.4,1) both;
  box-shadow: 0 6px 30px rgba(0,0,0,0.5);
}
.toast.out { animation: fade .6s ease forwards; }
.toast .amt { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.toast .who { color: var(--ink); font-size: 13px; }
@keyframes pop {
  from { opacity: 0; transform: translateY(14px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade { to { opacity: 0; transform: translateY(-6px); } }