/* 🏰 SOVEREIGN PROFILE CORE STYLES
   Version: 2.5 (Animated Static Edition)
*/

:root { 
    --p-accent: #3b82f6; 
}

/* 🌀 Loading Engine */
#loading { 
    transition: opacity 0.5s ease; 
}

/* 🛡️ Name Display Engine */
#name-display { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    margin: 1.5rem auto 0 auto; 
}

#name-display span { 
    display: inline-block; 
    max-width: 250px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    vertical-align: middle; 
}

/* 🛡️ Bio Smart Limiter */
#bio-display { 
    display: -webkit-box; 
    -webkit-line-clamp: 4; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    margin-top: 12px; 
    opacity: 0.8; 
    line-height: 1.6; 
    font-size: 0.875rem; 
    max-width: 85%; 
    margin-left: auto; 
    margin-right: auto; 
}

/* 🚀 Social Pill VVIP Style */
.social-pill { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 10px 20px; 
    background: rgba(255, 255, 255, 0.05); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 100px; 
    font-size: 12px; 
    font-weight: 700; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    text-decoration: none; 
    color: inherit; 
    backdrop-filter: blur(5px); 
    margin: 5px; 
}

.social-pill:hover { 
    background: rgba(255, 255, 255, 0.15); 
    transform: translateY(-3px); 
    border-color: var(--p-accent); 
}

.fa-check-circle { 
    filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.4)); 
}

/* 🔥 FORCE INJECTION: Bintik TV Static (VVIP REPAIR) */
.spoiler-cloak { 
    position: relative !important; 
    overflow: hidden !important; 
    display: inline-flex !important; /* Tukar dari inline-block ke inline-flex */
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    min-height: 20px;
}

.spoiler-cloak::before {
    content: "" !important;
    position: absolute !important;
    top: -100% !important;
    left: -100% !important;
    width: 300% !important;
    height: 300% !important;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAElBMVEUAAAD8/Pz09PT4+PjMzMz////Dhxo6AAAABXRSTlMAEMDAwMDfS9yVAAAANElEQVQ4y2NgwAHYmBgwAFYmBgwAFYmBgwAFYmBgwAFYmBgwAFYmBgwAFYmBgwAFYmBgwAEAtFMB9xid9Y0AAAAASUVORK5CYII=') !important;
    background-size: 50px 50px !important; /* Kecilkan sikit bintik supaya nampak lebih 'laju' */
    opacity: 0.5 !important;
    /* 🚀 PAKU MATI: Tambah 'both' pada animation */
    animation: noise-anim 0.1s steps(2) infinite both !important;
    z-index: 999 !important; /* Naikkan gila-gila z-index */
    pointer-events: none !important;
}

@keyframes noise-anim {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-1%, -2%); }
    20% { transform: translate(-3%, 1%); }
    30% { transform: translate(2%, -3%); }
    40% { transform: translate(-1%, 2%); }
    50% { transform: translate(-2%, -2%); }
    60% { transform: translate(3%, 1%); }
    70% { transform: translate(1%, 2%); }
    80% { transform: translate(-2%, 0); }
    90% { transform: translate(2%, 1%); }
    100% { transform: translate(0, 0); }
}

/* 🌀 Keyframes Gerakan Rawak - WAJIB ADA UNTUK ANIMASI */
@keyframes noise-anim {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-1%, -2%); }
    20% { transform: translate(-3%, 1%); }
    30% { transform: translate(2%, -3%); }
    40% { transform: translate(-1%, 2%); }
    50% { transform: translate(-2%, -2%); }
    60% { transform: translate(3%, 1%); }
    70% { transform: translate(1%, 2%); }
    80% { transform: translate(-2%, 0); }
    90% { transform: translate(2%, 1%); }
    100% { transform: translate(0, 0); }
}

/* 🛡️ revealed state */
.spoiler-cloak.revealed::before {
    display: none;
}

.spoiler-cloak.revealed {
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    background: transparent;
    color: inherit !important;
    text-shadow: none;
    border-color: transparent;
    user-select: text;
}