/* Donate block (see donate.js). Colours can be changed per game by setting these variables on .donate or a parent. */
.donate {
  --donate-accent: #ffe066;   /* border, button, game name */
  --donate-text: #f4f7ff;
  --donate-muted: #b8c7e6;
  --donate-bg: rgba(18, 38, 74, 0.6);
  margin: 6px 0 10px; padding: 8px 14px 16px; border: 2px solid var(--donate-accent); border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 224, 102, 0.16), var(--donate-bg)); box-shadow: 0 0 28px rgba(255, 224, 102, 0.2);
  text-align: center;
}
.donate-cast { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; }
.donate-head { margin: 4px 0 6px; font: 400 clamp(20px, 5vw, 26px)/1.05 "Luckiest Guy", sans-serif; color: #fff; }
.donate-head em { color: var(--donate-accent); font-style: normal; }
.donate-lead { margin: 0 auto 4px; max-width: 34ch; color: var(--donate-text); font-size: 14px; line-height: 1.45; }
.donate-sub { margin: 0 auto 12px; color: var(--donate-muted); font-size: 12px; }
.donate-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px 16px; border-radius: 14px;
  background: var(--donate-accent); color: #12264a; font: 400 18px "Luckiest Guy", sans-serif; letter-spacing: 0.04em; text-decoration: none;
  animation: donateGlow 1.8s ease-in-out infinite; }
.donate-button b { font-size: 1.3em; color: #c0303f; }
.donate-button:hover, .donate-button:focus-visible { filter: brightness(1.08); outline: none; }
.donate-note { margin: 8px 0 0; color: var(--donate-muted); font-size: 10px; }
@keyframes donateGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 224, 102, 0.55); } 50% { box-shadow: 0 0 0 10px rgba(255, 224, 102, 0), 0 0 26px rgba(255, 224, 102, 0.45); } }
@media (prefers-reduced-motion: reduce) { .donate-button { animation: none; } }
@media (max-height: 520px) { .donate-cast { max-width: 260px; } .donate-lead { font-size: 12px; } .donate { padding-bottom: 10px; } }