/* ============================================================================
   The play page's TIP — the dialog (html/play/partial/tip.html) and its thank-you
   (tip_thanks.html). Both sit on the shared modal shell (modal.css) and reuse the
   auth modal's field + error line (auth.css) and the top-up checkout note
   (topup.css); only what those don't have lives here. No inline styles (CSP).
   ============================================================================ */

/* The live price line under the box: "$3.00 tip + $0.40 service fee = $3.40". */
.tip-summary {
  margin: 0 0 14px;
  min-height: 1.3em;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.3;
  text-align: center;
  color: var(--color-text-dim);
}

/* The checkout note sits under the TIP button, inside the dialog. */
.modal-tip .topup-demo { margin-bottom: 0; }
/* The Terms line under the Stripe line — the same small print, its link in the site's link colour. */
.modal-tip .tip-terms { margin-top: 6px; }
.modal-tip .tip-terms a { color: var(--color-cyan); }

/* ---- the thank-you's confetti: 24 pieces spread across the top, each falling and
   spinning on its own beat. Colours, beats and drift come from nth-child patterns,
   so the template stays plain. ---- */
.tip-confetti {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
  overflow: visible;
}
.tip-confetti span {
  width: 8px;
  height: 12px;
  background: var(--color-gold);
  transform: translateY(-20px);
  animation: tip-confetti-fall 2.6s linear infinite;
}
.tip-confetti span:nth-child(4n + 2) { background: var(--color-cyan); }
.tip-confetti span:nth-child(4n + 3) { background: var(--color-pink); }
.tip-confetti span:nth-child(4n + 4) { background: var(--color-green); }
.tip-confetti span:nth-child(3n + 2) { animation-duration: 3.1s; animation-delay: .4s; }
.tip-confetti span:nth-child(3n + 3) { animation-duration: 2.2s; animation-delay: .9s; }
.tip-confetti span:nth-child(5n + 1) { animation-delay: 1.3s; }
.tip-confetti span:nth-child(2n) { animation-name: tip-confetti-fall-left; }

@keyframes tip-confetti-fall {
  from { transform: translate(0, -20px) rotate(0deg); }
  to { transform: translate(28px, 105vh) rotate(540deg); }
}
@keyframes tip-confetti-fall-left {
  from { transform: translate(0, -20px) rotate(0deg); }
  to { transform: translate(-28px, 105vh) rotate(-540deg); }
}

/* Reduced motion: no confetti at all (the buddy draws itself still — ide_buddy.js). */
@media (prefers-reduced-motion: reduce) {
  .tip-confetti { display: none; }
}