@charset "utf-8";

/* Uses shared tokens from style.css. Load this after style.css. */

.donation-notice-stack {
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 99996;
    display: grid;
    gap: 10px;
    width: min(340px, calc(100vw - 32px));
    pointer-events: none;
}

.donation-notice {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 14px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(117, 255, 205, 0.34);
    border-radius: 8px;
    background: rgba(8, 14, 24, 0.9);
    color: #f8fafc;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(12px);
    animation: donationNoticeIn 180ms ease-out both;
}

.donation-notice.is-leaving {
    animation: donationNoticeOut 180ms ease-in both;
}

.donation-notice-kicker {
    color: rgba(226, 232, 240, 0.68);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.donation-notice strong {
    grid-row: span 2;
    color: #75ffcd;
    font-family: Consolas, "Liberation Mono", monospace;
    font-size: 1rem;
    line-height: 1;
    white-space: nowrap;
}

.donation-notice span:last-child {
    color: rgba(248, 250, 252, 0.86);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

@keyframes donationNoticeIn {
    from {
        opacity: 0;
        transform: translate3d(12px, 8px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes donationNoticeOut {
    to {
        opacity: 0;
        transform: translate3d(10px, 4px, 0);
    }
}

.donation-effect-root {
    --donation-effect-accent: var(--primary);
    --donation-effect-accent-two: #46c6ff;
    --donation-effect-scale: 1;
    --donation-effect-flash-alpha: 0.25;
    --donation-effect-copy-width: min(88vw, 620px);
    --donation-effect-copy-max-height: min(68dvh, 560px);
    --donation-effect-amount-size: clamp(34px, 8vw, 96px);
    --donation-effect-name-size: clamp(12px, 2.2vw, 23px);

    position: fixed;
    inset: 0;
    z-index: 99997;
    overflow: hidden;
    pointer-events: none;
    display: grid;
    place-items: center;
    opacity: 1;
    transition: none;
    contain: layout paint style;
    isolation: isolate;
}

.donation-effect-root,
.donation-effect-root * {
    box-sizing: border-box;
}

.donation-effect-mythic,
.donation-effect-legendary,
.donation-effect-cosmic {
    background: transparent;
}

.donation-effect-legendary {
    background: transparent;
}

.donation-effect-cosmic {
    background: transparent;
}

.donation-effect-root.is-live {
    opacity: 1;
}

.donation-effect-root.is-done {
    opacity: 0;
    transition: opacity 140ms ease-out;
}

.donation-effect-canvas,
.donation-effect-flash {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.donation-effect-flash {
    background: transparent;
    opacity: 0;
    animation: donationEffectFlash 900ms var(--ease-standard) forwards;
}

.donation-effect-copy {
    position: relative;
    top: auto;
    left: auto;
    width: var(--donation-effect-copy-width);
    max-width: 92vw;
    max-height: var(--donation-effect-copy-max-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transform: scale(var(--donation-effect-scale)) translateZ(0);
    text-align: center;
    opacity: 1;
    visibility: visible;
    animation: none;
    transition: none;
    will-change: auto;
    contain: layout paint style;
    transform-origin: center;
    overflow: hidden;
    isolation: isolate;
}

.donation-effect-copy::before,
.donation-effect-copy::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: inherit;
}

.donation-effect-mythic .donation-effect-copy::before,
.donation-effect-legendary .donation-effect-copy::before,
.donation-effect-cosmic .donation-effect-copy::before {
    animation: donationEffectCardGlow 1500ms ease-in-out infinite alternate;
}

.donation-effect-legendary .donation-effect-copy::after,
.donation-effect-cosmic .donation-effect-copy::after {
    animation-duration: 980ms;
}

.donation-effect-copy::before {
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 0%,
            rgba(255, 255, 255, 0.16),
            transparent 44%),
        linear-gradient(90deg,
            transparent,
            color-mix(in srgb, var(--donation-effect-accent), transparent 90%),
            transparent);
    opacity: 0.9;
}

.donation-effect-copy::after {
    inset: -36% auto -36% -52%;
    z-index: 1;
    width: min(34%, 190px);
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.24),
        transparent);
    transform: skewX(-18deg);
    animation: donationEffectCardSheen 1180ms ease-out both;
}

.donation-effect-orbit,
.donation-effect-impact-line,
.donation-effect-glint {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.donation-effect-orbit {
    inset: 50% auto auto 50%;
    width: min(114%, 760px);
    height: clamp(72px, 16vw, 132px);
    border: 1.5px solid transparent;
    border-top-color: color-mix(in srgb, var(--donation-effect-accent-two), transparent 18%);
    border-bottom-color: color-mix(in srgb, var(--donation-effect-accent), transparent 38%);
    border-radius: 50%;
    opacity: 0;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--donation-effect-accent-two), transparent 44%));
    transform: translate(-50%, -50%) rotate(-9deg) scale(0.8);
    animation: donationEffectOrbitSweep 1800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.donation-effect-orbit-two {
    width: min(102%, 680px);
    height: clamp(52px, 12vw, 96px);
    border-top-color: color-mix(in srgb, #ffd84f, transparent 20%);
    border-bottom-color: color-mix(in srgb, #ff4f9a, transparent 34%);
    filter: drop-shadow(0 0 7px color-mix(in srgb, #ff4f9a, transparent 50%));
    animation-delay: 0ms;
    animation-duration: 2100ms;
}

.donation-effect-impact-line {
    top: 59%;
    left: 50%;
    width: min(96%, 620px);
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--donation-effect-accent), transparent 52%),
        rgba(255, 255, 255, 0.96),
        color-mix(in srgb, var(--donation-effect-accent-two), transparent 48%),
        transparent);
    box-shadow:
        0 0 10px color-mix(in srgb, var(--donation-effect-accent), transparent 42%),
        0 0 14px color-mix(in srgb, var(--donation-effect-accent-two), transparent 58%);
    opacity: 0;
    transform: translateX(-50%) scaleX(0.12);
    transform-origin: center;
    animation: donationEffectImpactLine 920ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.donation-effect-glint {
    width: 9px;
    aspect-ratio: 1;
    border-radius: 2px;
    background: var(--bright-snow);
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.86),
        0 0 12px var(--donation-effect-accent-two);
    opacity: 0;
    transform: rotate(45deg) scale(0.4);
    animation: donationEffectGlintPop 1300ms ease-out forwards;
}

.donation-effect-glint-one {
    top: 22%;
    left: 13%;
}

.donation-effect-glint-two {
    right: 14%;
    bottom: 27%;
    animation-delay: 0ms;
}

.donation-effect-names {
    font-family: var(--ff-display);
    font-weight: var(--fw-bold);
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.donation-effect-amount {
    color: var(--bright-snow);
    font-family: var(--ff-display);
    font-size: var(--donation-effect-amount-size);
    font-weight: var(--fw-bold);
    line-height: 0.94;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    text-wrap: balance;
    position: relative;
    z-index: 2;
    -webkit-text-stroke: 1.1px rgba(15, 18, 34, 0.86);
    paint-order: stroke fill;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.42));
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.78),
        0 2px 0 rgba(24, 23, 50, 0.8),
        0 0 7px color-mix(in srgb, var(--donation-effect-accent), transparent 42%),
        0 0 11px color-mix(in srgb, var(--donation-effect-accent-two), transparent 58%);
}

.donation-effect-mythic .donation-effect-amount,
.donation-effect-legendary .donation-effect-amount,
.donation-effect-cosmic .donation-effect-amount {
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #fff2b8 22%,
            var(--donation-effect-accent-two) 52%,
            #ff4f9a 100%);
    background-size: 100% 140%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: donationEffectGradientRun 1800ms steps(18, end) infinite alternate;
}

.donation-effect-legendary .donation-effect-amount {
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.82),
        0 2px 0 rgba(24, 23, 50, 0.82),
        0 0 8px color-mix(in srgb, var(--donation-effect-accent-two), transparent 36%),
        0 0 13px color-mix(in srgb, #ff4f9a, transparent 62%);
}

.donation-effect-cosmic .donation-effect-amount {
    animation-duration: 1400ms;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.82),
        0 2px 0 rgba(24, 23, 50, 0.84),
        0 0 8px color-mix(in srgb, #ff4f9a, transparent 34%),
        0 0 14px color-mix(in srgb, var(--donation-effect-accent-two), transparent 62%);
}

.donation-effect-names {
    color: var(--donation-effect-accent);
    font-size: var(--donation-effect-name-size);
    position: relative;
    z-index: 2;
    -webkit-text-stroke: 0.55px rgba(15, 18, 34, 0.72);
    paint-order: stroke fill;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35),
        0 2px 5px rgba(0, 0, 0, 0.5),
        0 0 7px color-mix(in srgb, var(--donation-effect-accent), transparent 52%);
}

.donation-effect-mythic .donation-effect-names,
.donation-effect-legendary .donation-effect-names,
.donation-effect-cosmic .donation-effect-names {
    letter-spacing: 0;
}

.donation-effect-legendary .donation-effect-names {
    color: var(--bright-snow);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4),
        0 2px 5px rgba(0, 0, 0, 0.52),
        0 0 8px color-mix(in srgb, var(--donation-effect-accent-two), transparent 48%);
}

.donation-effect-cosmic .donation-effect-names {
    color: var(--bright-snow);
    letter-spacing: 0;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4),
        0 2px 5px rgba(0, 0, 0, 0.52),
        0 0 8px color-mix(in srgb, #ff4f9a, transparent 48%);
}

.donation-effect-mythic .donation-effect-copy,
.donation-effect-legendary .donation-effect-copy,
.donation-effect-cosmic .donation-effect-copy {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--donation-effect-accent-two), transparent 72%),
        0 22px 74px rgba(0, 0, 0, 0.38),
        0 0 54px color-mix(in srgb, var(--donation-effect-accent-two), transparent 72%),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.donation-effect-cosmic .donation-effect-copy {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.28),
        0 26px 84px rgba(0, 0, 0, 0.42),
        0 0 72px color-mix(in srgb, #ff4f9a, transparent 68%),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

body.donation-effect-page-shake {
    animation: none;
}

body.donation-effect-page-shake .donation-effect-root {
    animation: donationEffectPageShake 520ms linear 2;
}

@keyframes donationEffectFlash {
    0% { opacity: 0; }
    12% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes donationEffectPageShake {
    0%, 100% { transform: translate3d(0, 0, 0); }
    12% { transform: translate3d(calc(var(--donation-effect-shake, 8px) * -0.25), 2px, 0); }
    24% { transform: translate3d(calc(var(--donation-effect-shake, 8px) * 0.28), -2px, 0); }
    36% { transform: translate3d(calc(var(--donation-effect-shake, 8px) * -0.18), 1px, 0); }
    48% { transform: translate3d(calc(var(--donation-effect-shake, 8px) * 0.2), -1px, 0); }
    60% { transform: translate3d(calc(var(--donation-effect-shake, 8px) * -0.12), 1px, 0); }
    72% { transform: translate3d(calc(var(--donation-effect-shake, 8px) * 0.1), 0, 0); }
}

@keyframes donationEffectGradientRun {
    from { background-position: 50% 0%; }
    to { background-position: 50% 100%; }
}

@keyframes donationEffectCardSheen {
    from {
        opacity: 0;
        transform: translateX(0) skewX(-18deg);
    }
    18% {
        opacity: 0.72;
    }
    to {
        opacity: 0;
        transform: translateX(380%) skewX(-18deg);
    }
}

@keyframes donationEffectCardGlow {
    from {
        opacity: 0.7;
    }
    to {
        opacity: 1;
    }
}

@keyframes donationEffectOrbitSweep {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-18deg) scale(0.78);
    }
    24% {
        opacity: 0.82;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(22deg) scale(1.12);
    }
}

@keyframes donationEffectImpactLine {
    0% {
        opacity: 0;
        transform: translateX(-50%) scaleX(0.1);
    }
    24% {
        opacity: 0.95;
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scaleX(1);
    }
}

@keyframes donationEffectGlintPop {
    0% {
        opacity: 0;
        transform: rotate(45deg) scale(0.35);
    }
    18% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) scale(1.45);
    }
}

@media (prefers-reduced-motion: reduce) {
    .donation-effect-root,
    .donation-effect-copy,
    .donation-effect-flash,
    body.donation-effect-page-shake .donation-effect-root,
    .donation-effect-page-shake {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

@media (max-width: 680px), (max-height: 520px) {
    .donation-effect-copy {
        top: auto;
        gap: 7px;
        transform: scale(var(--donation-effect-scale)) translateZ(0);
    }

    .donation-effect-orbit {
        width: min(106%, 420px);
        height: clamp(44px, 17vw, 76px);
    }

    .donation-effect-impact-line {
        top: 58%;
        width: min(90%, 340px);
        height: 2px;
    }

    .donation-effect-glint {
        width: 7px;
    }

    .donation-effect-amount {
        max-width: 92vw;
        line-height: 0.98;
        -webkit-text-stroke-width: 1px;
        text-shadow:
            0 1px 0 rgba(255, 255, 255, 0.72),
            0 2px 0 rgba(24, 23, 50, 0.82),
            0 0 6px color-mix(in srgb, var(--donation-effect-accent), transparent 44%),
            0 0 10px color-mix(in srgb, var(--donation-effect-accent-two), transparent 62%);
    }

    .donation-effect-names {
        line-height: 1.18;
        letter-spacing: 0;
        text-shadow:
            0 1px 0 rgba(255, 255, 255, 0.3),
            0 2px 5px rgba(0, 0, 0, 0.5),
            0 0 7px color-mix(in srgb, var(--donation-effect-accent), transparent 54%);
    }
}


/* Improved donation effect presentation.
   Global effects get a full premium takeover; server/local effects stay lighter and cleaner. */

.donation-effect-backdrop {
    position: absolute;
    inset: 0;
    opacity: 1;
    pointer-events: none;
    transition: none;
}

.donation-effect-root.is-live .donation-effect-backdrop {
    opacity: 1;
}

.donation-effect-local .donation-effect-backdrop {
    background:
        radial-gradient(circle at 50% 48%,
            color-mix(in srgb, var(--donation-effect-accent), transparent 78%) 0%,
            color-mix(in srgb, var(--donation-effect-accent-two), transparent 88%) 34%,
            transparent 68%);
}

.donation-effect-global .donation-effect-backdrop {
    background:
        radial-gradient(circle at 50% 50%,
            rgba(255, 255, 255, 0.16) 0%,
            color-mix(in srgb, var(--donation-effect-accent-two), transparent 72%) 18%,
            color-mix(in srgb, #15162b, transparent 20%) 58%,
            rgba(5, 6, 18, 0.74) 100%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--donation-effect-accent), transparent 82%),
            transparent 36%,
            color-mix(in srgb, #ff4f9a, transparent 84%));
}

.donation-effect-global .donation-effect-backdrop::before,
.donation-effect-global .donation-effect-backdrop::after {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        linear-gradient(115deg,
            transparent 34%,
            rgba(255, 255, 255, 0.14) 48%,
            transparent 62%);
    transform: translateX(-28%) rotate(4deg);
    animation: donationEffectGlobalSweep 2600ms ease-out infinite;
}

.donation-effect-global .donation-effect-backdrop::after {
    animation-delay: 900ms;
    opacity: 0.55;
    transform: translateX(20%) rotate(-8deg);
}

.donation-effect-copy {
    gap: clamp(7px, 1.2vw, 12px);
    padding: clamp(18px, 3vw, 30px);
}

.donation-effect-local .donation-effect-copy {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.04));
    border: 1px solid color-mix(in srgb, var(--donation-effect-accent), transparent 58%);
    border-radius: clamp(22px, 4vw, 38px);
    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.donation-effect-global .donation-effect-copy {
    padding-block: clamp(24px, 5vw, 48px);
    background:
        radial-gradient(circle at 50% 0%,
            rgba(255, 255, 255, 0.24),
            transparent 44%),
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.035));
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: clamp(28px, 5vw, 56px);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--donation-effect-accent-two), transparent 76%),
        0 24px 90px rgba(0, 0, 0, 0.42),
        0 0 60px color-mix(in srgb, var(--donation-effect-accent-two), transparent 62%),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.donation-effect-badge,
.donation-effect-title {
    position: relative;
    z-index: 2;
    font-family: var(--ff-display);
    text-transform: uppercase;
    text-wrap: balance;
}

.donation-effect-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 7px 13px 6px;
    border-radius: 999px;
    color: var(--bright-snow);
    font-size: clamp(10px, 1.8vw, 13px);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: 0.08em;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--donation-effect-accent), transparent 18%),
            color-mix(in srgb, var(--donation-effect-accent-two), transparent 12%));
    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.26),
        0 0 18px color-mix(in srgb, var(--donation-effect-accent-two), transparent 58%);
}

.donation-effect-local .donation-effect-badge {
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--donation-effect-accent), transparent 32%),
            color-mix(in srgb, var(--donation-effect-accent-two), transparent 42%));
    opacity: 0.94;
}

.donation-effect-title {
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(13px, 2.5vw, 24px);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

.donation-effect-global .donation-effect-title {
    color: #fff7d2;
    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.5),
        0 0 18px color-mix(in srgb, var(--donation-effect-accent-two), transparent 42%);
}

.donation-effect-global .donation-effect-amount {
    letter-spacing: -0.035em;
    filter:
        drop-shadow(0 10px 18px rgba(0, 0, 0, 0.48))
        drop-shadow(0 0 18px color-mix(in srgb, var(--donation-effect-accent-two), transparent 40%));
}

.donation-effect-local .donation-effect-amount {
    letter-spacing: -0.025em;
}

.donation-effect-global .donation-effect-impact-line {
    height: 4px;
    width: min(104%, 760px);
}

.donation-effect-global .donation-effect-orbit-one {
    height: clamp(90px, 18vw, 160px);
}

.donation-effect-global .donation-effect-orbit-two {
    height: clamp(70px, 14vw, 120px);
}

.donation-effect-local .donation-effect-orbit,
.donation-effect-local .donation-effect-impact-line {
    opacity: 0.88;
}

.donation-effect-spark .donation-effect-copy,
.donation-effect-shower .donation-effect-copy {
    --donation-effect-scale: min(var(--donation-effect-scale), 1);
}

@keyframes donationEffectGlobalSweep {
    0% {
        opacity: 0;
        transform: translateX(-52%) rotate(4deg);
    }
    28% {
        opacity: 0.82;
    }
    100% {
        opacity: 0;
        transform: translateX(52%) rotate(4deg);
    }
}

@media (max-width: 680px), (max-height: 520px) {
    .donation-effect-copy {
        padding: 16px;
        border-radius: 24px;
    }

    .donation-effect-global .donation-effect-copy {
        padding-block: 20px;
        border-radius: 28px;
    }

    .donation-effect-badge {
        min-height: 24px;
        padding: 6px 10px 5px;
        letter-spacing: 0.055em;
    }

    .donation-effect-title {
        max-width: 92vw;
    }
}

/* Instant readable layer: the badge/card/text must never wait for effect timing. */
.donation-effect-badge,
.donation-effect-title,
.donation-effect-amount,
.donation-effect-names {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    will-change: auto;
}

.donation-effect-badge {
    transform: translateZ(0);
}

.donation-effect-local .donation-effect-badge,
.donation-effect-global .donation-effect-badge {
    opacity: 1;
}

.donation-effect-flash {
    animation-duration: 280ms;
}

.donation-effect-impact-line {
    top: 50%;
}