.shake{animation:shake .28s ease-in-out}
@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}100%{transform:translateX(0)}}
.pulse{animation:pulse 1s ease-in-out}
@keyframes pulse{0%{opacity:.9}50%{opacity:1}100%{opacity:.9}}
.confetti{position:fixed;inset:0;pointer-events:none}
.loader-spin{animation:spin 0.9s linear infinite}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.dots::after{content:"";animation:dots 1.2s steps(3,end) infinite}
@keyframes dots{0%{content:"."}33%{content:".."}66%{content:"..."}100%{content:"."}}
.shimmer{background:linear-gradient(90deg,#e5e7eb 25%,#f3f4f6 50%,#e5e7eb 75%);background-size:200% 100%;animation:shimmer 1.2s ease-in-out infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Spoiler Styles */
.spoiler-pixelated {
    position: relative;
    color: transparent;
    cursor: pointer;
    user-select: none;
    transition: all 0.5s ease;
    display: inline-block;
    
    /* Lighter, sparser noise pattern */
    background-image: 
        radial-gradient(circle, #9ca3af 1px, transparent 1.5px),
        radial-gradient(circle, #6b7280 1px, transparent 1.5px);
    
    /* Much wider spacing between dots */
    background-size: 8px 8px, 6px 6px;
    background-position: 0 0, 3px 3px;
    background-repeat: repeat;
    
    border-radius: 4px;
    text-shadow: none;
    filter: none;
    opacity: 0.8;
}

.spoiler-pixelated:hover {
    opacity: 1;
}

.spoiler-pixelated.revealed {
    color: inherit;
    background-image: none;
    cursor: text;
    user-select: text;
    opacity: 1;
    /* Reset any background properties */
    background-color: transparent;
}

.spoiler-pixelated::after {
    display: none;
}