/* ===================================
   808 RECORDS - PIXEL ART STYLES
   Retro 8-bit Aesthetic Enhancement
   =================================== */

/* ===================================
   PIXEL ART DECORATIONS
   =================================== */

/* Pixel Border Frames */
.pixel-border {
    position: relative;
    border: 4px solid transparent;
    background: 
        linear-gradient(90deg, var(--accent-purple) 4px, transparent 4px) 0 0,
        linear-gradient(90deg, var(--accent-purple) 4px, transparent 4px) 0 100%,
        linear-gradient(0deg, var(--accent-purple) 4px, transparent 4px) 0 0,
        linear-gradient(0deg, var(--accent-purple) 4px, transparent 4px) 100% 0;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 12px 4px, 12px 4px, 4px 12px, 4px 12px;
}

/* Pixel Corner Decorations */
.pixel-corners::before,
.pixel-corners::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--accent-purple);
    image-rendering: pixelated;
}

.pixel-corners::before {
    top: -4px;
    left: -4px;
    clip-path: polygon(0 0, 100% 0, 100% 25%, 25% 25%, 25% 100%, 0 100%);
}

.pixel-corners::after {
    bottom: -4px;
    right: -4px;
    clip-path: polygon(75% 0, 100% 0, 100% 100%, 0 100%, 0 75%, 75% 75%);
}

/* ===================================
   PIXEL SKULL - Main Decorative Element
   =================================== */

.pixel-skull {
    width: 64px;
    height: 64px;
    position: relative;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.pixel-skull::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect fill='%238b5cf6' x='4' y='1' width='8' height='1'/%3E%3Crect fill='%238b5cf6' x='3' y='2' width='1' height='1'/%3E%3Crect fill='%238b5cf6' x='12' y='2' width='1' height='1'/%3E%3Crect fill='%238b5cf6' x='2' y='3' width='1' height='6'/%3E%3Crect fill='%238b5cf6' x='13' y='3' width='1' height='6'/%3E%3Crect fill='%23ffffff' x='3' y='3' width='10' height='6'/%3E%3Crect fill='%230a0a0a' x='4' y='4' width='3' height='3'/%3E%3Crect fill='%230a0a0a' x='9' y='4' width='3' height='3'/%3E%3Crect fill='%23ec4899' x='5' y='5' width='1' height='1'/%3E%3Crect fill='%23ec4899' x='10' y='5' width='1' height='1'/%3E%3Crect fill='%238b5cf6' x='3' y='9' width='1' height='1'/%3E%3Crect fill='%238b5cf6' x='12' y='9' width='1' height='1'/%3E%3Crect fill='%238b5cf6' x='4' y='10' width='8' height='1'/%3E%3Crect fill='%23ffffff' x='4' y='11' width='8' height='3'/%3E%3Crect fill='%230a0a0a' x='5' y='11' width='1' height='3'/%3E%3Crect fill='%230a0a0a' x='7' y='11' width='1' height='3'/%3E%3Crect fill='%230a0a0a' x='9' y='11' width='1' height='3'/%3E%3Crect fill='%230a0a0a' x='11' y='11' width='1' height='3'/%3E%3Crect fill='%238b5cf6' x='4' y='14' width='8' height='1'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 10px var(--neon-purple));
}

/* ===================================
   PIXEL HEART
   =================================== */

.pixel-heart {
    width: 48px;
    height: 48px;
    position: relative;
    image-rendering: pixelated;
}

.pixel-heart::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Crect fill='%23ef4444' x='1' y='1' width='3' height='1'/%3E%3Crect fill='%23ef4444' x='6' y='1' width='3' height='1'/%3E%3Crect fill='%23ef4444' x='0' y='2' width='1' height='3'/%3E%3Crect fill='%23ef4444' x='4' y='2' width='1' height='2'/%3E%3Crect fill='%23ef4444' x='5' y='2' width='1' height='1'/%3E%3Crect fill='%23ef4444' x='9' y='2' width='1' height='2'/%3E%3Crect fill='%23ef4444' x='10' y='2' width='1' height='3'/%3E%3Crect fill='%23ff6b6b' x='1' y='2' width='3' height='3'/%3E%3Crect fill='%23ff6b6b' x='6' y='2' width='3' height='3'/%3E%3Crect fill='%23ef4444' x='0' y='5' width='1' height='2'/%3E%3Crect fill='%23ef4444' x='10' y='5' width='1' height='2'/%3E%3Crect fill='%23ff6b6b' x='1' y='5' width='9' height='2'/%3E%3Crect fill='%23ef4444' x='1' y='7' width='1' height='1'/%3E%3Crect fill='%23ef4444' x='9' y='7' width='1' height='1'/%3E%3Crect fill='%23ff6b6b' x='2' y='7' width='7' height='1'/%3E%3Crect fill='%23ef4444' x='2' y='8' width='1' height='1'/%3E%3Crect fill='%23ef4444' x='8' y='8' width='1' height='1'/%3E%3Crect fill='%23ff6b6b' x='3' y='8' width='5' height='1'/%3E%3Crect fill='%23ef4444' x='3' y='9' width='1' height='1'/%3E%3Crect fill='%23ef4444' x='7' y='9' width='1' height='1'/%3E%3Crect fill='%23ff6b6b' x='4' y='9' width='3' height='1'/%3E%3Crect fill='%23ef4444' x='4' y='10' width='1' height='1'/%3E%3Crect fill='%23ef4444' x='6' y='10' width='1' height='1'/%3E%3Crect fill='%23ff6b6b' x='5' y='10' width='1' height='1'/%3E%3Crect fill='%23ef4444' x='5' y='11' width='1' height='1'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    animation: pixelPulse 1s ease-in-out infinite;
}

@keyframes pixelPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ===================================
   PIXEL STAR
   =================================== */

.pixel-star {
    width: 32px;
    height: 32px;
    position: relative;
    image-rendering: pixelated;
}

.pixel-star::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Crect fill='%2306b6d4' x='5' y='0' width='1' height='2'/%3E%3Crect fill='%2306b6d4' x='4' y='2' width='3' height='1'/%3E%3Crect fill='%2306b6d4' x='3' y='3' width='5' height='1'/%3E%3Crect fill='%2306b6d4' x='0' y='4' width='11' height='1'/%3E%3Crect fill='%2306b6d4' x='1' y='5' width='9' height='1'/%3E%3Crect fill='%2306b6d4' x='2' y='6' width='7' height='1'/%3E%3Crect fill='%2306b6d4' x='2' y='7' width='2' height='1'/%3E%3Crect fill='%2306b6d4' x='7' y='7' width='2' height='1'/%3E%3Crect fill='%2306b6d4' x='1' y='8' width='2' height='1'/%3E%3Crect fill='%2306b6d4' x='8' y='8' width='2' height='1'/%3E%3Crect fill='%2306b6d4' x='0' y='9' width='2' height='1'/%3E%3Crect fill='%2306b6d4' x='9' y='9' width='2' height='1'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 8px var(--neon-cyan));
}

/* ===================================
   PIXEL CROSS
   =================================== */

.pixel-cross {
    width: 40px;
    height: 48px;
    position: relative;
    image-rendering: pixelated;
}

.pixel-cross::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Crect fill='%23ec4899' x='4' y='0' width='2' height='3'/%3E%3Crect fill='%23ec4899' x='0' y='3' width='10' height='2'/%3E%3Crect fill='%23ec4899' x='4' y='5' width='2' height='7'/%3E%3Crect fill='%23ffffff' opacity='0.3' x='4' y='0' width='1' height='3'/%3E%3Crect fill='%23ffffff' opacity='0.3' x='0' y='3' width='5' height='1'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 8px var(--accent-pink));
}

/* ===================================
   PIXEL DIAMOND
   =================================== */

.pixel-diamond {
    width: 40px;
    height: 40px;
    position: relative;
    image-rendering: pixelated;
}

.pixel-diamond::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Crect fill='%238b5cf6' x='4' y='0' width='1' height='1'/%3E%3Crect fill='%238b5cf6' x='3' y='1' width='3' height='1'/%3E%3Crect fill='%238b5cf6' x='2' y='2' width='5' height='1'/%3E%3Crect fill='%238b5cf6' x='1' y='3' width='7' height='1'/%3E%3Crect fill='%23a855f7' x='0' y='4' width='9' height='1'/%3E%3Crect fill='%238b5cf6' x='1' y='5' width='7' height='1'/%3E%3Crect fill='%238b5cf6' x='2' y='6' width='5' height='1'/%3E%3Crect fill='%238b5cf6' x='3' y='7' width='3' height='1'/%3E%3Crect fill='%238b5cf6' x='4' y='8' width='1' height='1'/%3E%3Crect fill='%23ffffff' opacity='0.4' x='4' y='1' width='1' height='1'/%3E%3Crect fill='%23ffffff' opacity='0.3' x='3' y='2' width='2' height='1'/%3E%3Crect fill='%23ffffff' opacity='0.2' x='2' y='3' width='3' height='1'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 10px var(--neon-purple));
    animation: pixelFloat 3s ease-in-out infinite;
}

/* ===================================
   PIXEL MUSIC NOTE
   =================================== */

.pixel-note {
    width: 32px;
    height: 40px;
    position: relative;
    image-rendering: pixelated;
}

.pixel-note::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Crect fill='%2306b6d4' x='3' y='0' width='5' height='1'/%3E%3Crect fill='%2306b6d4' x='7' y='1' width='1' height='5'/%3E%3Crect fill='%2306b6d4' x='3' y='1' width='1' height='7'/%3E%3Crect fill='%2306b6d4' x='5' y='5' width='2' height='2'/%3E%3Crect fill='%2306b6d4' x='0' y='7' width='3' height='2'/%3E%3Crect fill='%2306b6d4' x='1' y='6' width='2' height='1'/%3E%3Crect fill='%23ffffff' opacity='0.3' x='3' y='0' width='2' height='1'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 6px var(--neon-cyan));
}

/* ===================================
   PIXEL LIGHTNING BOLT
   =================================== */

.pixel-bolt {
    width: 32px;
    height: 48px;
    position: relative;
    image-rendering: pixelated;
}

.pixel-bolt::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Crect fill='%23fbbf24' x='4' y='0' width='3' height='1'/%3E%3Crect fill='%23fbbf24' x='3' y='1' width='3' height='1'/%3E%3Crect fill='%23fbbf24' x='2' y='2' width='3' height='1'/%3E%3Crect fill='%23fbbf24' x='1' y='3' width='3' height='1'/%3E%3Crect fill='%23fbbf24' x='0' y='4' width='6' height='1'/%3E%3Crect fill='%23fbbf24' x='2' y='5' width='4' height='1'/%3E%3Crect fill='%23fbbf24' x='3' y='6' width='3' height='1'/%3E%3Crect fill='%23fbbf24' x='4' y='7' width='2' height='1'/%3E%3Crect fill='%23fbbf24' x='3' y='8' width='2' height='1'/%3E%3Crect fill='%23fbbf24' x='2' y='9' width='2' height='1'/%3E%3Crect fill='%23fbbf24' x='1' y='10' width='2' height='1'/%3E%3Crect fill='%23fbbf24' x='0' y='11' width='2' height='1'/%3E%3Crect fill='%23ffffff' opacity='0.5' x='4' y='0' width='1' height='1'/%3E%3Crect fill='%23ffffff' opacity='0.4' x='3' y='1' width='1' height='1'/%3E%3Crect fill='%23ffffff' opacity='0.3' x='2' y='2' width='1' height='1'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 10px #fbbf24);
    animation: pixelFlicker 0.5s ease-in-out infinite;
}

@keyframes pixelFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ===================================
   PIXEL CROWN
   =================================== */

.pixel-crown {
    width: 48px;
    height: 32px;
    position: relative;
    image-rendering: pixelated;
}

.pixel-crown::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Crect fill='%23fbbf24' x='0' y='3' width='1' height='5'/%3E%3Crect fill='%23fbbf24' x='11' y='3' width='1' height='5'/%3E%3Crect fill='%23fbbf24' x='1' y='2' width='1' height='1'/%3E%3Crect fill='%23fbbf24' x='10' y='2' width='1' height='1'/%3E%3Crect fill='%23fbbf24' x='2' y='1' width='1' height='1'/%3E%3Crect fill='%23fbbf24' x='9' y='1' width='1' height='1'/%3E%3Crect fill='%23fbbf24' x='5' y='0' width='2' height='1'/%3E%3Crect fill='%23fbbf24' x='4' y='1' width='4' height='1'/%3E%3Crect fill='%23fbbf24' x='3' y='2' width='6' height='1'/%3E%3Crect fill='%23fbbf24' x='1' y='3' width='10' height='5'/%3E%3Crect fill='%23ef4444' x='3' y='5' width='2' height='2'/%3E%3Crect fill='%2306b6d4' x='7' y='5' width='2' height='2'/%3E%3Crect fill='%23ffffff' opacity='0.3' x='5' y='0' width='1' height='1'/%3E%3Crect fill='%23ffffff' opacity='0.2' x='4' y='1' width='2' height='1'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 8px #fbbf24);
}

/* ===================================
   PIXEL CASSETTE TAPE
   =================================== */

.pixel-cassette {
    width: 80px;
    height: 48px;
    position: relative;
    image-rendering: pixelated;
}

.pixel-cassette::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Crect fill='%231a1a1a' x='0' y='0' width='20' height='12' rx='1'/%3E%3Crect fill='%23333' x='1' y='1' width='18' height='10'/%3E%3Crect fill='%238b5cf6' x='2' y='2' width='4' height='4' rx='2'/%3E%3Crect fill='%238b5cf6' x='14' y='2' width='4' height='4' rx='2'/%3E%3Crect fill='%230a0a0a' x='3' y='3' width='2' height='2'/%3E%3Crect fill='%230a0a0a' x='15' y='3' width='2' height='2'/%3E%3Crect fill='%23ec4899' x='7' y='3' width='6' height='3'/%3E%3Crect fill='%23333' x='3' y='7' width='14' height='3'/%3E%3Crect fill='%231a1a1a' x='4' y='8' width='12' height='1'/%3E%3Crect fill='%23ffffff' opacity='0.1' x='1' y='1' width='18' height='1'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 4px 15px rgba(139, 92, 246, 0.3));
}

/* ===================================
   PIXEL CD/VINYL
   =================================== */

.pixel-vinyl {
    width: 64px;
    height: 64px;
    position: relative;
    image-rendering: pixelated;
}

.pixel-vinyl::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle fill='%231a1a1a' cx='8' cy='8' r='7.5'/%3E%3Ccircle fill='%23333' cx='8' cy='8' r='6.5'/%3E%3Ccircle fill='%231a1a1a' cx='8' cy='8' r='5.5'/%3E%3Ccircle fill='%23333' cx='8' cy='8' r='4.5'/%3E%3Ccircle fill='%231a1a1a' cx='8' cy='8' r='3.5'/%3E%3Ccircle fill='%238b5cf6' cx='8' cy='8' r='2.5'/%3E%3Ccircle fill='%230a0a0a' cx='8' cy='8' r='1'/%3E%3Crect fill='%23ec4899' x='7' y='6' width='2' height='1'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    animation: spinVinyl 4s linear infinite;
    filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.4));
}

@keyframes spinVinyl {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===================================
   PIXEL SPEAKER
   =================================== */

.pixel-speaker {
    width: 40px;
    height: 56px;
    position: relative;
    image-rendering: pixelated;
}

.pixel-speaker::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Crect fill='%23333' x='0' y='0' width='10' height='14'/%3E%3Crect fill='%231a1a1a' x='1' y='1' width='8' height='12'/%3E%3Ccircle fill='%23444' cx='5' cy='4' r='2'/%3E%3Ccircle fill='%230a0a0a' cx='5' cy='4' r='1'/%3E%3Ccircle fill='%23444' cx='5' cy='10' r='3'/%3E%3Ccircle fill='%230a0a0a' cx='5' cy='10' r='2'/%3E%3Ccircle fill='%238b5cf6' cx='5' cy='10' r='1'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

/* ===================================
   PIXEL ANIMATIONS
   =================================== */

@keyframes pixelFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(5deg); }
    75% { transform: translateY(-5px) rotate(-5deg); }
}

@keyframes pixelBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes pixelGlitch {
    0%, 90%, 100% { transform: translate(0); filter: none; }
    92% { transform: translate(-2px, 1px); filter: hue-rotate(90deg); }
    94% { transform: translate(2px, -1px); filter: hue-rotate(180deg); }
    96% { transform: translate(-1px, 2px); filter: hue-rotate(270deg); }
    98% { transform: translate(1px, -2px); filter: hue-rotate(360deg); }
}

/* ===================================
   PIXEL GRID BACKGROUND
   =================================== */

.pixel-grid-bg {
    position: relative;
}

.pixel-grid-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 0;
}

/* ===================================
   PIXEL DIVIDERS
   =================================== */

.pixel-divider {
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 4'%3E%3Crect fill='%238b5cf6' x='0' y='1' width='4' height='2'/%3E%3Crect fill='%23ec4899' x='8' y='1' width='4' height='2'/%3E%3Crect fill='%2306b6d4' x='16' y='1' width='4' height='2'/%3E%3Crect fill='%23fbbf24' x='24' y='1' width='4' height='2'/%3E%3Crect fill='%2322c55e' x='32' y='1' width='4' height='2'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 40px 4px;
    image-rendering: pixelated;
}

/* ===================================
   PIXEL TEXT SHADOW EFFECT
   =================================== */

.pixel-text-shadow {
    text-shadow: 
        2px 2px 0 var(--accent-purple),
        4px 4px 0 var(--accent-pink),
        6px 6px 0 rgba(0, 0, 0, 0.3);
}

/* ===================================
   FLOATING PIXEL DECORATIONS CONTAINER
   =================================== */

.pixel-decorations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.pixel-decorations .pixel-skull {
    position: absolute;
    top: 15%;
    left: 5%;
    animation: pixelFloat 4s ease-in-out infinite;
}

.pixel-decorations .pixel-heart {
    position: absolute;
    top: 60%;
    right: 8%;
    animation: pixelFloat 5s ease-in-out infinite 0.5s;
}

.pixel-decorations .pixel-star {
    position: absolute;
    top: 25%;
    right: 12%;
    animation: pixelFloat 3s ease-in-out infinite 1s;
}

.pixel-decorations .pixel-cross {
    position: absolute;
    bottom: 20%;
    left: 10%;
    animation: pixelFloat 6s ease-in-out infinite 1.5s;
}

.pixel-decorations .pixel-diamond {
    position: absolute;
    top: 45%;
    left: 3%;
    animation: pixelFloat 4.5s ease-in-out infinite 2s;
}

.pixel-decorations .pixel-note {
    position: absolute;
    top: 70%;
    right: 5%;
    animation: pixelFloat 3.5s ease-in-out infinite 0.8s;
}

.pixel-decorations .pixel-bolt {
    position: absolute;
    top: 35%;
    right: 3%;
    animation: pixelFloat 5.5s ease-in-out infinite 1.2s;
}

.pixel-decorations .pixel-crown {
    position: absolute;
    bottom: 30%;
    right: 15%;
    animation: pixelFloat 4s ease-in-out infinite 0.3s;
}

/* ===================================
   PIXEL CARD OVERLAY
   =================================== */

.pixel-card-decoration {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.artist-card:hover .pixel-card-decoration,
.release-card:hover .pixel-card-decoration,
.news-card:hover .pixel-card-decoration {
    opacity: 1;
}

/* ===================================
   PIXEL LOADING ANIMATION
   =================================== */

.pixel-loading {
    display: flex;
    gap: 4px;
}

.pixel-loading span {
    width: 8px;
    height: 8px;
    background: var(--accent-purple);
    animation: pixelLoadingBounce 0.6s ease-in-out infinite;
}

.pixel-loading span:nth-child(2) { animation-delay: 0.1s; }
.pixel-loading span:nth-child(3) { animation-delay: 0.2s; }
.pixel-loading span:nth-child(4) { animation-delay: 0.3s; }

@keyframes pixelLoadingBounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-10px); opacity: 0.5; }
}

/* ===================================
   PIXEL BUTTON STYLE
   =================================== */

.pixel-btn {
    position: relative;
    background: var(--accent-purple);
    border: none;
    padding: 12px 24px;
    font-family: var(--font-display);
    font-size: 0.7rem;
    color: white;
    cursor: pointer;
    image-rendering: pixelated;
    clip-path: polygon(
        0 4px, 4px 4px, 4px 0,
        calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
        100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
        4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)
    );
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.pixel-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--accent-pink);
}

.pixel-btn:active {
    transform: translate(0, 0);
    box-shadow: none;
}

/* ===================================
   RESPONSIVE PIXEL ART
   =================================== */

@media (max-width: 768px) {
    .pixel-decorations .pixel-skull,
    .pixel-decorations .pixel-heart,
    .pixel-decorations .pixel-bolt,
    .pixel-decorations .pixel-crown {
        transform: scale(0.7);
    }
    
    .pixel-decorations .pixel-star,
    .pixel-decorations .pixel-cross,
    .pixel-decorations .pixel-diamond,
    .pixel-decorations .pixel-note {
        transform: scale(0.6);
    }
}

@media (max-width: 480px) {
    .pixel-decorations {
        display: none;
    }
}