/* ==========================================================================
   POPUP DONATE — chọn cá → mở app ngân hàng quét mã → đã bón
   Điện thoại: bảng trượt từ dưới lên. Máy tính: hộp thoại giữa màn hình.
   Viền đen + bóng cứng chỉ dành cho khung popup và nút chính.
   ========================================================================== */

:root {
  --dd-soft: #F1F1EC;
  --dd-line: #DEDEDA;
  --dd-muted: #4A4A45;
  --dd-night: #111111;
}

/* ---------- Thẻ mời bón cá trong hero ---------- */
.donate-teaser {
  position: relative;
  width: 100%; max-width: 440px; margin-top: 3.5rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .75rem;
  padding: 1.75rem 1.75rem 1.75rem;
  background: var(--paper);
  border: 3px solid var(--ink); border-radius: 26px;
  box-shadow: 8px 8px 0 var(--ink);
}
.donate-teaser-goat {
  position: absolute; right: 8px; top: -54px;
  width: 150px; height: 150px; object-fit: contain;
  animation: ddBob 3.2s ease-in-out infinite;
}
.donate-teaser-title {
  margin-top: 2.25rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.3rem); letter-spacing: -.03em; line-height: 1.05;
}
.donate-teaser-text { font-size: 1.05rem; line-height: 1.5; max-width: 30ch; }
.donate-teaser-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.donate-teaser-chips button {
  min-height: 44px; padding: 0 1rem;
  border-radius: 14px; background: var(--dd-soft); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  transition: background .15s, transform .15s;
}
.donate-teaser-chips button:hover { background: var(--butter); }
.donate-teaser-chips button:active { transform: scale(.95); }
.donate-teaser .dd-btn-primary { width: 100%; margin-top: .5rem; }
@media (max-width: 600px) {
  /* Dê nhỏ lại và tiêu đề lùi xuống để không đè chữ */
  .donate-teaser-goat { width: 120px; height: 120px; top: -48px; }
  .donate-teaser-title { margin-top: 3.75rem; }
}

/* ---------- Nút dùng chung ---------- */
.dd-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 60px; padding: 0 1.5rem;
  background: var(--mint); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 18px;
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
  text-decoration: none; cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.dd-btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.dd-btn-primary:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.dd-btn-primary:disabled { opacity: .6; cursor: progress; transform: none; }
.dd-btn-soft, .dd-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: 0 1.25rem; border-radius: 16px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; cursor: pointer;
}
.dd-btn-soft { background: var(--dd-soft); color: var(--ink); }
.dd-btn-ghost { background: transparent; color: #fff; }
.dd-btn-soft svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
:where(.dd, .donate-teaser) :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.dd-view-done :focus-visible { outline-color: var(--mint); }

/* ---------- Khung popup ---------- */
.dd {
  padding: 0; border: 0; background: transparent; color: var(--ink);
  max-width: none; max-height: none; overflow: visible;
  font-family: var(--font-display);
}
.dd::backdrop { background: rgba(17, 17, 17, .55); }
.dd[open] .dd-sheet { animation: ddUp .45s cubic-bezier(.2, 1.15, .4, 1) both; }
.dd-sheet {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border-top: 3px solid var(--ink);
  overflow: hidden;
}
.dd-sheet[data-view="done"] { background: var(--dd-night); }
.dd-handle { display: block; width: 44px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: var(--dd-line); flex-shrink: 0; }
.dd-sheet[data-view="done"] .dd-handle { background: #3A3A36; }

.dd-view { display: none; min-height: 0; flex: 1; flex-direction: column; }
.dd-sheet[data-view="form"] .dd-view-form,
.dd-sheet[data-view="pay"] .dd-view-pay,
.dd-sheet[data-view="done"] .dd-view-done { display: flex; }

.dd-form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.dd-head { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.25rem 0; }
.dd-head-goat { width: 56px; height: 56px; object-fit: contain; margin: -6px -4px -6px -6px; }
.dd-title { flex: 1; font-weight: 700; font-size: 1.4rem; letter-spacing: -.02em; line-height: 1.15; }
.dd-head-text { flex: 1; min-width: 0; }
.dd-head-text .dd-title { font-size: 1.3rem; }
.dd-sub { font-size: .95rem; color: var(--dd-muted); }
.dd-icon-btn {
  width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 50%; background: var(--dd-soft); cursor: pointer;
}
.dd-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.dd-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem 1.25rem .5rem; display: flex; flex-direction: column; }
.dd-body > * { flex-shrink: 0; }   /* màn thấp: cuộn phần thân thay vì ép dẹt ô nhập */
.dd-foot { padding: .75rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.dd-foot .dd-btn-primary, .dd-foot .dd-btn-soft { width: 100%; }

.dd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Bước 1: số cá ---------- */
.dd-amount { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.1rem; background: var(--dd-soft); border-radius: 18px; }
.dd-amount input {
  flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; letter-spacing: -.03em;
}
.dd-amount input:focus { outline: none; }
.dd-amount:focus-within { box-shadow: 0 0 0 3px var(--ink); }
.dd-amount-unit { font-size: 1.3rem; font-weight: 500; }
.dd-fish { display: flex; align-items: center; gap: .5rem; margin: .6rem .25rem .85rem; font-size: 1.05rem; }
.dd-fish-ico { width: 30px; height: 19px; flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(167, 243, 208, .9)); animation: ddHop 2.2s ease-in-out infinite; }
.dd-fish-ico path { fill: var(--mint); }
.dd-fish-ico circle { fill: var(--ink); }
.dd-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1.1rem; }
.dd-chip {
  min-height: 48px; border-radius: 14px; background: var(--dd-soft); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
}
.dd-chip:active { transform: scale(.95); }
.dd-chip.is-on { background: var(--ink); color: #fff; }
.dd-field { font-size: .95rem; font-weight: 500; margin: .25rem 0 .4rem; }
.dd-input {
  width: 100%; margin-bottom: .9rem; padding: .85rem 1rem;
  border: 0; border-radius: 14px; background: var(--dd-soft); color: var(--ink);
  font-family: var(--font-display); font-size: 1.15rem;
}
.dd-input:focus { outline: none; box-shadow: 0 0 0 3px var(--ink); }
.dd-message { resize: none; font-family: var(--font-hand); font-size: 1.2rem; line-height: 1.35; }
.dd-error { color: #B91C1C; font-weight: 500; }

/* Lời nhắn: viết chữ hoặc gửi giọng nói (chọn một) */
.dd-msg-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: .1rem 0 .6rem; }
.dd-msg-tab {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 50px; padding: 0 .75rem; border-radius: 14px; background: var(--dd-soft); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; cursor: pointer;
  transition: background .15s, color .15s;
}
.dd-msg-tab svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.dd-msg-tab.is-on { background: var(--ink); color: #fff; }
.dd-msg-tab.is-locked { color: #9A9A94; cursor: not-allowed; }
.dd-voice-lock { margin: -.2rem 0 .7rem; font-size: .92rem; color: #4A4A45; }
.dd-msg-panel[hidden] { display: none; }

.dd-voice { margin-bottom: .9rem; padding: .85rem 1rem; border-radius: 14px; background: var(--dd-soft); }
.dd-voice-row { display: flex; align-items: center; gap: .85rem; }
.dd-voice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dd-voice-text b { font-size: 1.05rem; }
.dd-voice-text span { font-size: .92rem; color: #4A4A45; }
.dd-rec-btn, .dd-play-btn {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
}
.dd-rec-btn { background: #E11D48; animation: ddPulse 1.6s ease-out infinite; }
.dd-rec-btn svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.dd-ico-stop { display: none; width: 18px; height: 18px; border-radius: 4px; background: #fff; }
.dd-play-btn { display: none; background: var(--ink); }
.dd-play-btn svg { width: 18px; height: 18px; fill: var(--mint); }
.dd-ico-pause { display: none; }
.dd-voice.is-playing .dd-ico-play { display: none; }
.dd-voice.is-playing .dd-ico-pause { display: block; }
.dd-redo-btn { display: none; min-height: 44px; padding: 0 .9rem; border-radius: 12px; background: #fff; font-family: var(--font-display); font-weight: 700; font-size: .92rem; cursor: pointer; }
.dd-voice[data-state="recording"] .dd-ico-mic { display: none; }
.dd-voice[data-state="recording"] .dd-ico-stop { display: block; }
.dd-voice[data-state="processing"] .dd-rec-btn { opacity: .5; animation: none; pointer-events: none; }
.dd-voice[data-state="ready"] .dd-rec-btn { display: none; }
.dd-voice[data-state="ready"] .dd-play-btn, .dd-voice[data-state="ready"] .dd-redo-btn { display: grid; }
.dd-voice[data-state="ready"] .dd-voice-text span { color: #047857; }
.dd-meter { display: none; position: relative; height: 10px; margin-top: .8rem; border-radius: 5px; background: #DEDEDA; }
.dd-voice[data-state="recording"] .dd-meter { display: block; }
.dd-meter-zone { position: absolute; left: 50%; width: 30%; top: 0; bottom: 0; background: var(--mint); }
.dd-meter-needle { position: absolute; top: -4px; width: 6px; height: 18px; margin-left: -3px; border-radius: 3px; background: var(--ink); transition: left .08s linear; }
@keyframes ddPulse { 0% { box-shadow: 0 0 0 0 rgba(225, 29, 72, .45); } 100% { box-shadow: 0 0 0 16px rgba(225, 29, 72, 0); } }

/* Xem trước alert (chỉ màn hình rộng) */
.dd-preview { display: none; }

/* ---------- Bước 2: quét mã ---------- */
.dd-pay-body { align-items: center; text-align: center; }
.dd-qr {
  position: relative; width: 220px; height: 220px; padding: 10px; flex-shrink: 0;
  background: #fff; border-radius: 22px; box-shadow: 0 0 0 9px var(--mint);
  animation: ddQrIn .6s cubic-bezier(.3, 1.4, .5, 1) both;
}
.dd-qr img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.dd-qr-zoom-hint {
  position: absolute; right: -6px; bottom: -6px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: #fff; pointer-events: none;
}
.dd-qr-zoom-hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Mã QR phóng to toàn màn hình */
.dd-zoom {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 16px;
  border: 0; background: #fff; cursor: zoom-out;
}
.dd-zoom[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.dd-zoom::backdrop { background: #fff; }
.dd-zoom img { width: 100%; max-width: 560px; max-height: calc(100dvh - 90px); object-fit: contain; }
.dd-zoom p { font-size: .95rem; color: #4A4A45; text-align: center; }
.dd-qr-scan {
  position: absolute; left: 6%; right: 6%; top: 8%; height: 4px; border-radius: 2px;
  background: var(--mint-deep); box-shadow: 0 0 12px var(--mint-deep);
  animation: ddScan 2.6s ease-in-out infinite;
}
.dd-pay-hint { margin: 1.1rem .5rem 0; font-size: .98rem; line-height: 1.45; color: #3F3F3B; }
.dd-save { width: 100%; margin-top: 1.4rem; min-height: 56px; font-size: 1.1rem; }
.dd-save svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dd-save + .dd-pay-hint { margin-top: .8rem; }
/* Logo mở app chỉ có ích trên điện thoại; máy tính thì quét mã trên màn hình */
@media (pointer: fine) { .dd-only-phone { display: none; } }
@media (pointer: coarse) { .dd-only-desk { display: none; } }
.dd-banks { width: 100%; margin-top: .8rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.dd-bank {
  height: 60px; padding: 6px; display: grid; place-items: center;
  border-radius: 14px; background: #fff; box-shadow: 0 0 0 1.5px var(--dd-line);
  font-family: var(--font-display); font-weight: 700; font-size: .9rem; line-height: 1.15; color: var(--ink);
  cursor: pointer; transition: transform .15s cubic-bezier(.3, 1.8, .5, 1), box-shadow .15s;
}
.dd-bank { overflow: hidden; }
.dd-bank img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.45); }   /* logo ngân hàng có nhiều lề trắng */
.dd-bank[data-app="momo"] img { transform: none; width: 82%; }
.dd-bank:hover { box-shadow: 0 0 0 2px var(--ink); }
.dd-bank:active { transform: scale(.94); }
.dd-status { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 1.1rem; font-weight: 500; }
.dd-status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mint-deep); animation: ddDot 1s ease-in-out infinite; }
.dd-status.is-expired .dd-status-dot { background: #B5B5AF; animation: none; }
.dd-toast {
  position: absolute; left: 50%; bottom: 24px; z-index: 3;
  width: min(340px, calc(100% - 32px)); transform: translateX(-50%);
  padding: .8rem 1rem; border-radius: 16px; background: var(--ink); color: #fff;
  font-size: .95rem; line-height: 1.35; text-align: left;
  animation: ddToast .3s cubic-bezier(.2, 1.3, .4, 1) both;
}
.dd-toast b { display: block; font-size: 1rem; }
.dd-toast span { color: #D4D4CF; }

/* ---------- Bước 3: đã bón ---------- */
.dd-view-done { align-items: center; text-align: center; color: #fff; }
.dd-done-stage { position: relative; width: 100%; height: 300px; flex-shrink: 0; }
.dd-done-glow {
  position: absolute; left: 50%; top: 50%; width: 420px; height: 340px; margin: -170px 0 0 -210px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(253, 230, 138, .55), rgba(167, 243, 208, .18) 45%, rgba(0, 0, 0, 0));
  animation: ddFlash 1.2s ease-out both;
}
.dd-done-fishes { position: absolute; inset: 0; }
.dd-done-fishes svg { position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -16px; animation: ddLeap 3s cubic-bezier(.15, .7, .35, 1) infinite; }
.dd-done-goat {
  position: absolute; left: 50%; top: 30px; width: 230px; height: 230px; margin-left: -115px; object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(253, 230, 138, .75));
  animation: ddJump 1.8s ease-in-out .3s infinite;
}
.dd-done-stamp {
  position: absolute; right: 12%; top: 214px;
  padding: .35rem .9rem; border-radius: 12px; background: var(--butter); color: var(--ink);
  font-weight: 700; font-size: 1.5rem; letter-spacing: .06em; transform: rotate(-10deg);
  animation: ddSlam .6s cubic-bezier(.3, 1.4, .5, 1) .6s both;
}
.dd-done-title { margin: .5rem 1.5rem 0; font-weight: 700; font-size: 2.2rem; letter-spacing: -.03em; line-height: 1.05; }
.dd-done-text { margin: .9rem 1.75rem 0; font-size: 1.1rem; line-height: 1.5; color: #D4D4CF; }
.dd-done-foot { margin-top: auto; width: 100%; }
.dd-btn-mint { border-color: var(--mint); box-shadow: none; }
.dd-btn-mint:hover { box-shadow: none; }

/* ---------- Điện thoại: bảng trượt từ dưới ---------- */
@media (max-width: 899px) {
  .dd { position: fixed; inset: auto 0 0 0; width: 100%; margin: 0; }
  .dd-sheet { max-height: 92dvh; border-radius: 28px 28px 0 0; }
  .dd-sheet[data-view="pay"] { height: 92dvh; }
  /* Gọn phần đầu để lựa chọn chữ / giọng nói lọt vào màn hình đầu tiên */
  .dd-view-form .dd-body { padding-top: .9rem; }
  .dd-amount { padding: .55rem 1rem; }
  .dd-amount input { font-size: 2.2rem; }
  .dd-fish { margin: .45rem .25rem .6rem; font-size: 1rem; }
  .dd-chip { min-height: 44px; }
  .dd-chips { margin-bottom: .8rem; }
}

/* Màn thấp (điện thoại nhỏ): thu mã QR để nút lưu và logo app nằm trong màn hình */
@media (max-height: 720px) {
  .dd-qr { width: 168px; height: 168px; padding: 8px; }
  .dd-pay-hint { font-size: .92rem; }
  .dd-save { margin-top: 1.1rem; }
}

/* ---------- Máy tính: hộp thoại giữa màn hình ---------- */
@media (min-width: 900px) {
  .dd { margin: auto; }
  .dd[open] .dd-sheet { animation-name: ddPop; }
  .dd-sheet {
    width: 520px; max-height: min(760px, 92vh);
    border: 3px solid var(--ink); border-radius: 28px;
    box-shadow: 8px 8px 0 var(--ink);
  }
  .dd-handle { display: none; }
  .dd-head { padding-top: 1.5rem; }
  .dd-sheet { max-width: calc(100vw - 48px); }
  .dd-sheet[data-view="form"] { width: 940px; }
  .dd-view-form { flex-direction: row; }
  .dd-form { flex: 1; min-width: 0; }
  .dd-head, .dd-body, .dd-foot { padding-left: 2rem; padding-right: 2rem; }

  .dd-preview {
    position: relative; overflow: hidden;
    width: 380px; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem; background: var(--dd-night); color: #fff; text-align: center;
  }
  .dd-preview::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 420px; height: 360px; margin: -180px 0 0 -210px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(253, 230, 138, .42), rgba(167, 243, 208, .14) 50%, rgba(0, 0, 0, 0));
    animation: ddGlow 3s ease-in-out infinite;
  }
  .dd-preview-label { position: absolute; top: 1.6rem; left: 1.75rem; font-size: .95rem; color: #B9B9B3; }
  .dd-preview-stage { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 100%; }
  .dd-preview-goat {
    width: 110px; height: 110px; object-fit: contain; margin-bottom: -18px; position: relative; z-index: 2;
    filter: drop-shadow(2px 3px 0 rgba(17, 17, 17, .85)) drop-shadow(0 0 14px rgba(167, 243, 208, .6));
    animation: ddBob 2.4s ease-in-out infinite;
  }
  .dd-preview-tag {
    position: relative; z-index: 3; padding: .25rem .9rem;
    border: 2px solid var(--ink); border-radius: 10px; background: var(--butter); color: var(--ink);
    box-shadow: 3px 3px 0 var(--ink); font-weight: 700; font-size: .85rem; letter-spacing: .1em; transform: rotate(-3deg);
  }
  .dd-preview-name {
    margin-top: .5rem; max-width: 100%; overflow-wrap: anywhere;
    font-weight: 700; font-size: 2.4rem; line-height: 1.05; color: var(--butter);
    -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 4px 5px 0 var(--ink);
  }
  .dd-preview-line { margin-top: .4rem; font-weight: 700; font-size: 1.1rem; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
  .dd-preview-line b { -webkit-text-stroke: 0; color: var(--ink); background: var(--butter); border: 2px solid var(--ink); border-radius: 10px; padding: 0 .6rem; }
  .dd-preview-msg {
    margin-top: .6rem; max-width: 100%; overflow-wrap: anywhere;
    font-family: var(--font-hand); font-size: 1.2rem; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
  }
  .dd-preview-msg:empty { display: none; }
}

/* ---------- Chuyển động ---------- */
@keyframes ddUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ddPop { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ddBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ddHop { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-6px) rotate(-8deg); } }
@keyframes ddGlow { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes ddQrIn { 0% { opacity: 0; transform: scale(.85) rotate(-3deg); } 60% { opacity: 1; transform: scale(1.03) rotate(1deg); } 100% { transform: none; } }
@keyframes ddScan { 0%, 100% { top: 8%; } 50% { top: 88%; } }
@keyframes ddDot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes ddToast { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ddFlash { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: .7; transform: scale(1.05); } }
@keyframes ddLeap {
  0% { opacity: 0; transform: translate(0, 0) rotate(var(--r0)) scale(.4); }
  10% { opacity: 1; }
  45% { transform: translate(var(--mx), var(--my)) rotate(var(--r1)) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--ex), var(--ey)) rotate(var(--r2)) scale(.7); }
}
@keyframes ddJump { 0%, 100% { transform: translateY(0) scale(1); } 15% { transform: scale(1.08, .9); } 40% { transform: translateY(-30px) scale(.95, 1.06); } 65% { transform: scale(1.05, .95); } }
@keyframes ddSlam { 0% { transform: scale(3) rotate(-30deg); opacity: 0; } 55% { transform: scale(.9) rotate(-10deg); opacity: 1; } 75% { transform: scale(1.06) rotate(-10deg); } 100% { transform: scale(1) rotate(-10deg); } }

@media (prefers-reduced-motion: reduce) {
  .dd[open] .dd-sheet, .donate-teaser-goat, .dd-fish-ico, .dd-qr, .dd-qr-scan, .dd-status-dot, .dd-toast,
  .dd-done-glow, .dd-done-goat, .dd-done-stamp, .dd-preview::before, .dd-preview-goat { animation: none; }
  .dd-done-fishes { display: none; }
  .dd-rec-btn { animation: none; }
}