/* ===============================
   FULL-SCREEN CANVAS (OBS)
   =============================== */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  background: transparent;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Center widget */
body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  transform: translateY(-10vh);
}

/* ===============================
   TITLE PILL
   =============================== */
#zapboard-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(34, 34, 34, 1.52);

  color: #fff;
  font-size: 26px;
  font-weight: 700;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  margin-bottom: 10px;
}

/* ⚡ TITLE BOLT — YELLOW ONLY */
.zapbolt {
  display: inline-block;
  line-height: 1;

  color: #ffd54f !important;
  font-size: 23px;
  font-weight: 900;

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;


}

/* ===============================
   ZAPS LIST
   =============================== */
#zaps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: fit-content;

  padding: 2px 7px;
  border-radius: 20px;
  background: #eee561;

  color: #000;
  font-weight: bold;
  font-size: 16px;
}

.zap {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(34,34,34,0.92);
  border: 1px solid rgba(255,255,255,1.15);

  color: #fff;
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
}

.zap .user {
  color: #2fa1ff;
  font-weight: 700;
}

.zap .amount {
  color: #ffd54f;
  font-weight: 700;
}

/* ===============================
   FIRST ZAP BURST (CONFETTI)
   =============================== */
#zapburst {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 999999;
}

/* BASE PARTICLE — NO COLOR, NO GLOW */
.zap-particle {
  position: absolute;
  left: var(--x0);
  top: var(--y0);
  transform: translate(-50%, -50%);

  font-size: var(--size);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-variant-emoji: text;

  animation: zapFly var(--dur) ease-out forwards;
  user-select: none;
  white-space: nowrap;
}

/* ₿ CONFETTI — BITCOIN ORANGE */
.zap-particle.btc-particle {
  color: #f7931a;
  text-shadow:
    0 0 6px rgba(247,147,26,.9),
    0 0 16px rgba(247,147,26,.6),
    0 0 26px rgba(247,147,26,.4);
}

/* ⚡ CONFETTI — ZAP YELLOW */
.zap-particle.bolt-particle {
  color: #ffd54f;
  text-shadow:
    0 0 6px rgba(255,213,79,.9),
    0 0 14px rgba(255,213,79,.6),
    0 0 22px rgba(255,213,79,.35);
}

/* ===============================
   ANIMATION
   =============================== */
@keyframes zapFly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.6);
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate(
      calc(-50% + var(--dx)),
      calc(-50% + var(--dy))
    ) scale(.9);
    opacity: 0;
  }
}


/* sats right */
.zap .amount {
  color: #ffd54f;
  font-weight: 700;
}



.zap .zap-comment {
  color: #ccc;
  font-style: italic;
}



.zap .sats-symbol {
  color: #f7931a;
  font-weight: 700;
}