html,
body {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif
}

body.moon-gradient {
    background: radial-gradient(1200px 600px at 50% -200px, rgba(168, 85, 247, .28), rgba(13, 15, 30, .94)), radial-gradient(800px 360px at 10% 110%, rgba(139, 92, 246, .22), transparent 60%), radial-gradient(800px 360px at 90% 110%, rgba(244, 114, 182, .16), transparent 60%), #0b0a16
}

.card-blur {
    backdrop-filter: blur(10px)
}

.grid-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .16;
    background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 36px 36px, 36px 36px;
    background-position: center center
}

.gradient-text {
    background: linear-gradient(90deg, #c084fc, #a78bfa, #f0abfc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent
}

.coin-wrap {
    position: relative;
    width: min(72vw, 320px);
    height: min(72vw, 320px)
}

.coin-frame {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    overflow: hidden;
    background: radial-gradient(70% 70%at 50% 35%, rgba(255, 255, 255, .08), rgba(2, 6, 23, .45));
    box-shadow: 0 10px 40px rgba(168, 85, 247, .35), 0 0 0 1px rgba(255, 255, 255, .12) inset;
    border: 1px solid rgba(255, 255, 255, .15)
}

.coin-wrap::before {
    content: "";
    position: absolute;
    inset: -30px;
    border-radius: 9999px;
    background: radial-gradient(closest-side, rgba(168, 85, 247, .55), rgba(168, 85, 247, .18) 60%, transparent 70%);
    filter: blur(18px);
    opacity: .85;
    pointer-events: none;
    animation: pulse 4s ease-in-out infinite
}

.coin-wrap::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 9999px;
    background: conic-gradient(from 0deg, rgba(217, 70, 239, .0) 0%, rgba(217, 70, 239, .35) 20%, rgba(99, 102, 241, .35) 40%, rgba(217, 70, 239, .0) 60%, rgba(236, 72, 153, .35) 80%, rgba(217, 70, 239, .0) 100%);
    filter: blur(6px);
    opacity: .9;
    animation: spin 12s linear infinite;
    mask: radial-gradient(circle closest-side, transparent 72%, black 73%)
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: .6;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.04)
    }
}

.coin-img {
    position: absolute;
    inset: 14px;
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 32px rgba(168, 85, 247, .25)
}

.coin-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.shimmer {
    position: relative;
    overflow: hidden
}

.shimmer:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .06) 20%, transparent 40%);
    transform: translateX(-100%);
    animation: shine 3s infinite
}

@keyframes shine {
    to {
        transform: translateX(100%)
    }
}

.vignette:before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(1000px 500px at 50% -100px, transparent, rgba(0, 0, 0, .28));
    pointer-events: none
}

.gradient-yes {
    background: linear-gradient(90deg, #34d399, #22c55e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent
}

.gradient-no {
    background: linear-gradient(90deg, #fb7185, #ef4444);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent
}

.track {
    height: 12px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 255, 255, .08)
}

.track>.fill {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #d946ef, #a78bfa);
    box-shadow: 0 0 18px rgba(217, 70, 239, .35)
}

.pulse-btn::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    filter: blur(12px);
    animation: modalPulse 2s ease-in-out infinite;
    z-index: -1
}

.pulse-btn::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    filter: blur(16px);
    animation: modalPulse 2s ease-in-out infinite reverse;
    z-index: -1;
    opacity: .8
}

.pulse-btn-no::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    filter: blur(12px);
    animation: modalPulseNo 2s ease-in-out infinite;
    z-index: -1
}

.pulse-btn-no::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    filter: blur(16px);
    animation: modalPulseNo 2s ease-in-out infinite reverse;
    z-index: -1;
    opacity: .8
}

@keyframes modalPulse {

    0%,
    100% {
        opacity: .6;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.05)
    }
}

@keyframes modalPulseNo {

    0%,
    100% {
        opacity: .5;
        transform: scale(1)
    }

    50% {
        opacity: .9;
        transform: scale(1.03)
    }
}

.modal-backdrop {
    backdrop-filter: blur(12px);
    background: rgba(15, 23, 42, .85)
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px)
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes floatOut {
    from {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(-10px)
    }
}

.modal-enter {
    animation: modalSlideIn .4s ease-out
}

.modal-grid-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .1;
    background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 36px 36px, 36px 36px;
    background-position: center center;
    border-radius: inherit
}

.modal-token-img {
    box-shadow: 0 0 20px rgba(168, 85, 247, .3)
}

.text-emerald-700 {
    color: rgb(59, 255, 158) !important;
    font-weight: 700;
}

.text-rose-700 {
    color: rgb(255, 77, 77) !important;
    font-weight: 700;
}