////////////////////////////////////////////////////
// SPARKD CREATOR PROFILE
// Modern SPARKD Dark / Neon Interface
////////////////////////////////////////////////////

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Bangers&display=swap');


/* ==================================================
   GLOBAL
================================================== */

* {
    box-sizing: border-box;
}


html {
    min-height: 100%;
}


body {

    margin: 0;

    min-height: 100vh;

    font-family:
        "Orbitron",
        Arial,
        sans-serif;

    color: #f2f2f2;

    background:

        radial-gradient(
            circle at 50% -10%,
            rgba(0, 255, 100, 0.12),
            transparent 35%
        ),

        radial-gradient(
            circle at 10% 40%,
            rgba(0, 255, 100, 0.05),
            transparent 30%
        ),

        radial-gradient(
            circle at 90% 70%,
            rgba(0, 255, 100, 0.04),
            transparent 30%
        ),

        #050505;

    overflow-x: hidden;
}


/* ==================================================
   PROFILE PAGE
================================================== */

#sparkdProfilePage {

    min-height: 100vh;

    position: relative;

    padding-bottom: 60px;
}


/* ==================================================
   HEADER
================================================== */

.profileHeader {

    position: relative;

    min-height: 120px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px 20px;

    border-bottom:
        1px solid rgba(0, 255, 100, 0.18);

    background:
        rgba(0, 0, 0, 0.75);

    box-shadow:
        0 0 35px rgba(0, 255, 100, 0.05);

    backdrop-filter:
        blur(12px);
}


.profileLogo {

    text-align: center;

    font-family:
        "Bangers",
        sans-serif;

    font-size:
        clamp(32px, 6vw, 58px);

    letter-spacing:
        3px;

    color:
        #ffffff;

    text-shadow:
        0 0 8px rgba(0, 255, 100, 0.55),
        0 0 25px rgba(0, 255, 100, 0.25);
}


.profileLogo span {

    display: block;

    margin-top: -5px;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(9px, 1.5vw, 13px);

    font-weight:
        700;

    letter-spacing:
        5px;

    color:
        #39ff75;
}


/* ==================================================
   NAV BUTTON
================================================== */

.profileNavButton {

    position: absolute;

    left: 25px;

    top: 50%;

    transform:
        translateY(-50%);

    border:
        1px solid rgba(0, 255, 100, 0.45);

    background:
        rgba(0, 30, 10, 0.75);

    color:
        #39ff75;

    padding:
        11px 18px;

    border-radius:
        10px;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        all 0.2s ease;
}


.profileNavButton:hover {

    background:
        rgba(0, 255, 100, 0.12);

    border-color:
        #39ff75;

    box-shadow:
        0 0 18px rgba(0, 255, 100, 0.25);

    transform:
        translateY(-50%)
        translateY(-2px);
}


/* ==================================================
   MAIN CONTAINER
================================================== */

.profileContainer {

    width:
        min(1100px, 92%);

    margin:
        45px auto;

    display:
        flex;

    flex-direction:
        column;

    gap:
        25px;
}


/* ==================================================
   PROFILE CARD
================================================== */

.profileCard {

    position:
        relative;

    padding:
        35px;

    border:
        1px solid rgba(0, 255, 100, 0.25);

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 25, 18, 0.96),
            rgba(4, 8, 5, 0.96)
        );

    box-shadow:
        0 0 35px rgba(0, 255, 100, 0.07),
        inset 0 0 30px rgba(0, 255, 100, 0.015);

    overflow:
        hidden;
}


.profileCard::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #39ff75,
            transparent
        );

    opacity:
        0.8;
}


/* ==================================================
   PROFILE TOP
================================================== */

.profileTop {

    display:
        grid;

    grid-template-columns:
        260px 1fr;

    gap:
        45px;

    align-items:
        center;
}


/* ==================================================
   PROFILE IMAGE
================================================== */

.profileImageSection {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        13px;
}


.profileImage {

    width:
        190px;

    height:
        190px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    font-size:
        65px;

    color:
        #39ff75;

    background:
        radial-gradient(
            circle,
            rgba(0, 255, 100, 0.13),
            rgba(0, 0, 0, 0.9) 70%
        );

    border:
        3px solid rgba(57, 255, 117, 0.7);

    box-shadow:
        0 0 15px rgba(0, 255, 100, 0.25),
        0 0 45px rgba(0, 255, 100, 0.08);

    transition:
        all 0.25s ease;
}


.profileImage:hover {

    border-color:
        #39ff75;

    box-shadow:
        0 0 20px rgba(0, 255, 100, 0.45),
        0 0 60px rgba(0, 255, 100, 0.12);

    transform:
        scale(1.02);
}


.profileImage img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


/* ==================================================
   IMAGE UPLOAD
================================================== */

.uploadProfileButton {

    display:
        inline-block;

    cursor:
        pointer;

    padding:
        10px 16px;

    border:
        1px solid rgba(0, 255, 100, 0.35);

    border-radius:
        9px;

    background:
        rgba(0, 255, 100, 0.06);

    color:
        #39ff75;

    font-size:
        11px;

    font-weight:
        700;

    transition:
        all 0.2s ease;
}


.uploadProfileButton:hover {

    background:
        rgba(0, 255, 100, 0.13);

    border-color:
        #39ff75;

    box-shadow:
        0 0 15px rgba(0, 255, 100, 0.15);
}


/* ==================================================
   CONTENT GUARD STATUS
================================================== */

.profileScanStatus {

    max-width:
        210px;

    text-align:
        center;

    color:
        #777;

    font-size:
        9px;

    line-height:
        1.5;
}


/* ==================================================
   CREATOR INFO
================================================== */

.creatorInfo {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        12px;
}


.holderBadge {

    display:
        inline-block;

    padding:
        6px 11px;

    border-radius:
        20px;

    border:
        1px solid rgba(57, 255, 117, 0.35);

    background:
        rgba(0, 255, 100, 0.06);

    color:
        #39ff75;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1px;
}


/* ==================================================
   INPUTS
================================================== */

.profileInput {

    width:
        100%;

    border:
        1px solid rgba(0, 255, 100, 0.18);

    border-radius:
        10px;

    background:
        rgba(0, 0, 0, 0.45);

    color:
        #ffffff;

    padding:
        13px 15px;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        12px;

    outline:
        none;

    transition:
        all 0.2s ease;
}


.profileInput::placeholder {

    color:
        #555;
}


.profileInput:focus {

    border-color:
        rgba(57, 255, 117, 0.65);

    box-shadow:
        0 0 15px rgba(0, 255, 100, 0.08);
}


.profileNameInput {

    font-size:
        21px;

    font-weight:
        700;
}


.profileBioInput {

    min-height:
        95px;

    resize:
        vertical;

    line-height:
        1.6;
}


/* ==================================================
   SAVE BUTTON
================================================== */

.saveProfileButton {

    border:
        none;

    border-radius:
        10px;

    padding:
        12px 20px;

    background:
        #39ff75;

    color:
        #031008;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        11px;

    font-weight:
        900;

    cursor:
        pointer;

    transition:
        all 0.2s ease;
}


.saveProfileButton:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 0 22px rgba(57, 255, 117, 0.35);
}


/* ==================================================
   SECTIONS
================================================== */

.profileSection {

    padding:
        27px;

    border:
        1px solid rgba(0, 255, 100, 0.16);

    border-radius:
        18px;

    background:
        rgba(5, 10, 7, 0.88);

    box-shadow:
        inset 0 0 25px rgba(0, 255, 100, 0.012);
}


.profileSection h2 {

    margin:
        0 0 22px;

    font-size:
        16px;

    letter-spacing:
        1px;

    color:
        #39ff75;
}


/* ==================================================
   STATS
================================================== */

.statsGrid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        14px;
}


.profileStat {

    min-height:
        95px;

    padding:
        18px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        9px;

    border:
        1px solid rgba(0, 255, 100, 0.12);

    border-radius:
        13px;

    background:
        rgba(0, 0, 0, 0.32);

    transition:
        all 0.2s ease;
}


.profileStat:hover {

    border-color:
        rgba(57, 255, 117, 0.35);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 25px rgba(0, 255, 100, 0.05);
}


.profileStat span {

    color:
        #777;

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        1px;
}


.profileStat strong {

    color:
        #ffffff;

    font-size:
        16px;
}


/* ==================================================
   HOLDER STATUS
================================================== */

.holderStatus {

    padding:
        20px;

    border:
        1px solid rgba(0, 255, 100, 0.12);

    border-radius:
        12px;

    background:
        rgba(0, 0, 0, 0.35);

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    margin-bottom:
        15px;
}


.holderStatus strong {

    color:
        #39ff75;

    font-size:
        13px;
}


.holderStatus span {

    color:
        #777;

    font-size:
        10px;

    line-height:
        1.5;
}


.connectWalletButton {

    border:
        1px solid rgba(57, 255, 117, 0.4);

    background:
        rgba(0, 255, 100, 0.06);

    color:
        #39ff75;

    padding:
        12px 18px;

    border-radius:
        9px;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        all 0.2s ease;
}


.connectWalletButton:hover {

    background:
        rgba(0, 255, 100, 0.13);

    border-color:
        #39ff75;

    box-shadow:
        0 0 20px rgba(0, 255, 100, 0.15);
}


/* ==================================================
   FEATURED MEME
================================================== */

.featuredMeme {

    min-height:
        180px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px dashed rgba(0, 255, 100, 0.18);

    border-radius:
        13px;

    background:
        rgba(0, 0, 0, 0.3);

    color:
        #555;

    text-align:
        center;
}


.featuredMeme div {

    font-size:
        38px;

    margin-bottom:
        10px;

    opacity:
        0.5;
}


.featuredMeme p {

    margin:
        0;

    font-size:
        10px;
}


/* ==================================================
   ACHIEVEMENTS
================================================== */

.achievementGrid {

    display:
        grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap:
        12px;
}


.achievement {

    min-height:
        110px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border:
        1px solid rgba(0, 255, 100, 0.1);

    border-radius:
        12px;

    background:
        rgba(0, 0, 0, 0.3);

    font-size:
        28px;

    text-align:
        center;
}


.achievement span {

    font-size:
        8px;

    color:
        #777;

    letter-spacing:
        0.5px;
}


.achievement.locked {

    filter:
        grayscale(1);

    opacity:
        0.4;
}


/* ==================================================
   RECENT CREATIONS
================================================== */

.recentCreations {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        12px;
}


.emptyCreations {

    grid-column:
        1 / -1;

    min-height:
        130px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px dashed rgba(0, 255, 100, 0.15);

    border-radius:
        12px;

    color:
        #555;

    font-size:
        10px;

    text-align:
        center;
}


/* ==================================================
   FOOTER
================================================== */

.profileFooter {

    text-align:
        center;

    padding:
        25px 15px;

    color:
        #3d664a;

    font-size:
        9px;

    letter-spacing:
        2px;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 800px) {

    .profileHeader {

        padding-top:
            75px;

    }


    .profileNavButton {

        top:
            20px;

        left:
            20px;

        transform:
            none;
    }


    .profileNavButton:hover {

        transform:
            translateY(-2px);
    }


    .profileTop {

        grid-template-columns:
            1fr;

        gap:
            30px;
    }


    .creatorInfo {

        align-items:
            stretch;
    }


    .statsGrid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .achievementGrid {

        grid-template-columns:
            repeat(3, 1fr);
    }


    .recentCreations {

        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 500px) {

    .profileContainer {

        width:
            94%;

        margin-top:
            25px;
    }


    .profileCard {

        padding:
            22px 16px;
    }


    .profileSection {

        padding:
            20px 15px;
    }


    .profileImage {

        width:
            155px;

        height:
            155px;
    }


    .statsGrid {

        grid-template-columns:
            1fr;
    }


    .achievementGrid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .recentCreations {

        grid-template-columns:
            1fr;
    }


    .profileLogo {

        font-size:
            31px;
    }

}

/* =====================================================
   SPARKD ACHIEVEMENT ARTWORK
   ===================================================== */

.achievementIcon img {
    width: 110px;
    height: 110px;

    object-fit: contain;

    display: block;
    margin: 0 auto;
}

#communityProfilesBtn {
    left: 180px;
}

/* =====================================================
   SPARKD COMMUNITY PROFILES DROPDOWN
   ===================================================== */

.communityProfilesDropdown {

    position: fixed;

    top: 75px;

    left: 180px;

    width: 360px;

    max-height: 70vh;

    overflow-y: auto;

    background:
        rgba(5, 10, 8, 0.97);

    border:
        1px solid rgba(57, 255, 117, 0.45);

    border-radius: 14px;

    padding: 15px;

    box-shadow:
        0 0 25px rgba(57, 255, 117, 0.18);

    z-index: 99999;

    display: none;
}


.communityProfilesDropdown.open {

    display: block;

}


/* =====================================================
   COMMUNITY PROFILES HEADER
   ===================================================== */

.communityProfilesHeader {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;

    color:
        #39ff75;

    font-family:
        Orbitron,
        sans-serif;

}


#closeCommunityProfiles {

    width: auto;

    margin: 0;

    padding: 4px 9px;

    border: 1px solid
        rgba(57, 255, 117, 0.35);

    border-radius: 7px;

    background:
        rgba(0, 30, 10, 0.8);

    color:
        #39ff75;

    cursor: pointer;

}


/* =====================================================
   COMMUNITY CREATOR LIST
   ===================================================== */

.communityProfilesList {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.communityCreatorCard {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px;

    margin: 0;

    border: 1px solid
        rgba(57, 255, 117, 0.18);

    border-radius: 10px;

    background:
        rgba(0, 30, 10, 0.45);

    color: white;

    text-align: left;

    cursor: pointer;

}


.communityCreatorCard:hover {

    border-color:
        #39ff75;

    background:
        rgba(0, 255, 100, 0.08);

    box-shadow:
        0 0 15px
        rgba(57, 255, 117, 0.18);

}


/* =====================================================
   CREATOR IMAGE
   ===================================================== */

.communityCreatorImage {

    width: 55px;

    height: 55px;

    flex-shrink: 0;

    border-radius: 50%;

    overflow: hidden;

    border: 1px solid
        rgba(57, 255, 117, 0.45);

}


.communityCreatorImage img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.communityCreatorPlaceholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

}


/* =====================================================
   CREATOR INFORMATION
   ===================================================== */

.communityCreatorInfo {

    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;

    flex: 1;

}


.communityCreatorInfo strong {

    color:
        white;

    font-size: 14px;

}


.communityCreatorInfo span {

    color:
        #39ff75;

    font-size: 12px;

}


.communityCreatorInfo small {

    color:
        #999;

    font-size: 10px;

}


.communityCreatorArrow {

    font-size: 16px;

    opacity: 0.75;

}


/* =====================================================
   EMPTY / LOADING STATES
   ===================================================== */

.communityProfilesEmpty,
.communityProfilesLoading {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 30px 15px;

    text-align: center;

    color: #aaa;

}


.communityProfilesEmpty strong {

    color:
        #39ff75;

}