/* BPD GAMING NETWORK - ARK */


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

* {
    box-sizing: border-box;
}


.ark-page,
.ark-landing {
    display: flex;
    flex-direction: column;
    gap: 48px;

    width: 100%;
    max-width: 1100px;

    margin:
        5%
        auto;

    padding:
        clamp(
            28px,
            4vw,
            56px
        )
        clamp(
            24px,
            5vw,
            64px
        );
}


/*
=========================================================
SECTION HEADINGS
=========================================================
*/

.ark-section-heading {
    margin-bottom: 24px;
}


.ark-section-eyebrow,
.ark-content-eyebrow,
.ark-landing-card-eyebrow,
.ark-community-button-eyebrow {
    display: inline-block;

    margin-bottom: 8px;

    color:
        #8b5cf6;

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.ark-section-title {
    margin: 0;

    color:
        #ffffff;

    font-size:
        clamp(
            1.8rem,
            4vw,
            2.6rem
        );
}


.ark-section-description {
    max-width: 760px;

    margin:
        10px
        0
        0;

    color:
        #9ca5b5;

    font-size:
        0.95rem;

    line-height:
        1.65;
}


/*
=========================================================
HERO
=========================================================
*/

.ark-hero {
    position: relative;

    overflow: hidden;

    padding:
        clamp(
            28px,
            5vw,
            50px
        );

    border:
        1px solid
        rgba(
            139,
            92,
            246,
            0.2
        );

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            rgba(
                139,
                92,
                246,
                0.12
            ),
            rgba(
                21,
                24,
                31,
                0.95
            )
        );

    box-shadow:
        0
        0
        24px
        rgba(
            139,
            92,
            246,
            0.06
        );
}


.ark-hero-title {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            2.2rem,
            6vw,
            4rem
        );

    line-height:
        1;
}


.ark-hero-description {
    max-width:
        720px;

    margin:
        16px
        0
        0;

    color:
        #aab2c1;

    font-size:
        1rem;

    line-height:
        1.7;
}


/*
=========================================================
OVERVIEW
=========================================================
*/

.ark-overview {
    padding:
        22px;

    border:
        1px solid
        #2d3340;

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            rgba(
                139,
                92,
                246,
                0.07
            ),
            #15181f
        );
}


.ark-overview-content {
    max-width:
        800px;
}


.ark-overview-content h2,
.ark-overview-content h3 {
    margin:
        0
        0
        10px;

    color:
        #ffffff;

    font-size:
        1.25rem;
}


.ark-overview-content p {
    margin:
        0;

    color:
        #aab2c1;

    line-height:
        1.65;
}


.ark-overview-content p + p {
    margin-top:
        10px;
}


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

.ark-content-section {
    width:
        100%;
}


.ark-content-heading {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        16px;
}


.ark-content-heading h2,
.ark-content-heading h3 {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        1.3rem;
}


.ark-content-description {
    max-width:
        700px;

    margin:
        7px
        0
        0;

    color:
        #8f98a8;

    font-size:
        0.88rem;

    line-height:
        1.55;
}


/*
=========================================================
LANDING PAGE OPTIONS
=========================================================
*/

.ark-landing-options {
    display:
        grid;

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

    gap:
        16px;
}


.ark-landing-card {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    width:
        100%;

    min-height:
        150px;

    padding:
        22px;

    cursor:
        pointer;

    border:
        1px solid
        #2d3340;

    border-radius:
        14px;

    background:
        #15181f;

    color:
        inherit;

    text-align:
        left;

    box-shadow:
        0
        0
        16px
        rgba(
            139,
            92,
            246,
            0.04
        );

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;


    text-decoration:
        none;
}


.ark-landing-card:hover {
    border-color:
        rgba(
            139,
            92,
            246,
            0.5
        );

    background:
        #191d25;

    box-shadow:
        0
        0
        18px
        rgba(
            139,
            92,
            246,
            0.14
        );

    transform:
        translateY(
            -2px
        );
}


.ark-landing-card-content {
    min-width:
        0;
}


.ark-landing-card h3 {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        1.15rem;
}


.ark-landing-card p {
    max-width:
        440px;

    margin:
        8px
        0
        0;

    color:
        #9ca5b5;

    font-size:
        0.88rem;

    line-height:
        1.55;
}


.ark-landing-card-action {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0
        0
        42px;

    width:
        42px;

    height:
        42px;

    border:
        1px solid
        #343a47;

    border-radius:
        10px;

    color:
        #b79cff;

    font-size:
        1.25rem;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}


.ark-landing-card:hover
.ark-landing-card-action {
    border-color:
        #8b5cf6;

    background:
        rgba(
            139,
            92,
            246,
            0.1
        );

    transform:
        translateX(
            2px
        );
}


/*
=========================================================
COMMUNITY
=========================================================
*/

.ark-community-section {
    padding:
        24px;

    border:
        1px solid
        #2d3340;

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            rgba(
                139,
                92,
                246,
                0.07
            ),
            #15181f
        );
}


.ark-community-heading {
    margin-bottom:
        18px;
}


.ark-community-heading h2 {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        1.3rem;
}


.ark-community-heading p {
    max-width:
        700px;

    margin:
        8px
        0
        0;

    color:
        #9ca5b5;

    line-height:
        1.6;
}


.ark-community-buttons {
    display:
        grid;

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

    gap:
        14px;
}


.ark-community-button {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    width:
        100%;

    min-height:
        110px;

    padding:
        18px;

    cursor:
        pointer;

    border:
        1px solid
        #343a47;

    border-radius:
        12px;

    background:
        rgba(
            16,
            19,
            25,
            0.7
        );

    color:
        inherit;

    text-align:
        left;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.ark-community-button:hover,
.ark-community-button[aria-expanded="true"] {
    border-color:
        rgba(
            139,
            92,
            246,
            0.55
        );

    background:
        rgba(
            139,
            92,
            246,
            0.06
        );

    box-shadow:
        0
        0
        18px
        rgba(
            139,
            92,
            246,
            0.12
        );

    transform:
        translateY(
            -1px
        );
}


.ark-community-button-content {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;
}


.ark-community-button-title {
    color:
        #ffffff;

    font-size:
        1rem;

    font-weight:
        700;
}


.ark-community-button-description {
    margin-top:
        6px;

    color:
        #8f98a8;

    font-size:
        0.82rem;

    line-height:
        1.45;
}


.ark-community-button-action {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0
        0
        38px;

    width:
        38px;

    height:
        38px;

    border:
        1px solid
        #343a47;

    border-radius:
        9px;

    color:
        #b79cff;

    font-size:
        1.2rem;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}


.ark-community-button[aria-expanded="true"]
.ark-community-button-action {
    border-color:
        #8b5cf6;

    background:
        rgba(
            139,
            92,
            246,
            0.1
        );

    transform:
        rotate(
            45deg
        );
}


/*
=========================================================
COMMUNITY PANELS
=========================================================
*/

.ark-community-panel {
    margin-top:
        18px;

    padding:
        20px;

    border:
        1px solid
        #343a47;

    border-radius:
        12px;

    background:
        #101319;
}


.ark-community-panel[hidden] {
    display:
        none;
}


.ark-community-panel-heading {
    margin-bottom:
        18px;
}


.ark-community-panel-heading h3 {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        1.1rem;
}


.ark-community-panel-heading p {
    max-width:
        700px;

    margin:
        7px
        0
        0;

    color:
        #8f98a8;

    font-size:
        0.88rem;

    line-height:
        1.55;
}


/*
=========================================================
FORMS
=========================================================
*/

.ark-idea-form,
.ark-team-form {
    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;
}


.ark-idea-field {
    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;
}


.ark-idea-field label {
    color:
        #d7dce5;

    font-size:
        0.82rem;

    font-weight:
        700;
}


.ark-idea-field input,
.ark-idea-field textarea,
.ark-idea-field select {
    width:
        100%;

    padding:
        11px
        12px;

    border:
        1px solid
        #343a47;

    border-radius:
        9px;

    outline:
        none;

    background:
        #0d1015;

    color:
        #ffffff;

    font:
        inherit;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.ark-idea-field input::placeholder,
.ark-idea-field textarea::placeholder {
    color:
        #687181;
}


.ark-idea-field textarea {
    min-height:
        120px;

    resize:
        vertical;
}


.ark-idea-field input:focus,
.ark-idea-field textarea:focus,
.ark-idea-field select:focus {
    border-color:
        #8b5cf6;

    background:
        #101319;

    box-shadow:
        0
        0
        0
        3px
        rgba(
            139,
            92,
            246,
            0.12
        );
}


.ark-idea-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;
}


.ark-idea-status {
    min-height:
        18px;

    color:
        #9ca5b5;

    font-size:
        0.8rem;
}


.ark-idea-submit {
    flex:
        0
        0
        auto;

    padding:
        10px
        18px;

    cursor:
        pointer;

    border:
        1px solid
        #8b5cf6;

    border-radius:
        8px;

    background:
        #8b5cf6;

    color:
        #ffffff;

    font:
        inherit;

    font-weight:
        700;

    transition:
        background 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}


.ark-idea-submit:hover {
    background:
        #9d74ff;

    transform:
        translateY(
            -1px
        );

    box-shadow:
        0
        8px
        20px
        rgba(
            139,
            92,
            246,
            0.22
        );
}


.ark-idea-submit:active {
    transform:
        translateY(
            0
        );
}


.ark-idea-submit:disabled {
    cursor:
        not-allowed;

    opacity:
        0.55;

    transform:
        none;

    box-shadow:
        none;
}


/*
=========================================================
MOD LIST
=========================================================
*/

.ark-mod-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;
}


/*
=========================================================
MOD BANNER CARD
=========================================================
*/

.ark-mod-card {
    --mod-glow:
        139,
        92,
        246;

    position:
        relative;

    overflow:
        hidden;

    width:
        100%;

    border:
        1px solid
        rgba(
            var(--mod-glow),
            0.18
        );

    border-radius:
        13px;

    background:
        #15181f;

    box-shadow:
        0
        0
        14px
        rgba(
            var(--mod-glow),
            0.055
        );

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.ark-mod-card:hover {
    border-color:
        rgba(
            var(--mod-glow),
            0.58
        );

    background:
        #191d25;

    box-shadow:
        0
        0
        16px
        rgba(
            var(--mod-glow),
            0.22
        ),
        0
        0
        34px
        rgba(
            var(--mod-glow),
            0.12
        );

    transform:
        translateY(
            -2px
        );
}


/*
=========================================================
MOD BANNER
=========================================================
*/

.ark-mod-banner {
    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    min-height:
        106px;

    padding:
        12px
        16px;
}


.ark-mod-image-wrap {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0
        0
        78px;

    width:
        78px;

    height:
        78px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );

    border-radius:
        10px;

    background:
        #101319;
}


.ark-mod-image {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.ark-mod-main {
    flex:
        1;

    min-width:
        0;
}


.ark-mod-heading {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        5px;
}


.ark-mod-title-group {
    min-width:
        0;
}


.ark-mod-label {
    display:
        block;

    margin-bottom:
        3px;

    color:
        rgba(
            var(--mod-glow),
            0.9
        );

    font-size:
        0.67rem;

    font-weight:
        700;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}


.ark-mod-name {
    margin:
        0;

    overflow:
        hidden;

    color:
        #ffffff;

    font-size:
        clamp(
            1rem,
            1.5vw,
            1.2rem
        );

    line-height:
        1.25;

    text-overflow:
        ellipsis;
}

.ark-mod-description {
    display:
        -webkit-box;

    margin:
        0;

    overflow:
        hidden;

    color:
        #aab2c1;

    font-size:
        0.86rem;

    line-height:
        1.45;

    line-clamp:
        2;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;
}


/*
=========================================================
CURSEFORGE LINK
=========================================================
*/

.ark-mod-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    flex:
        0
        0
        auto;

    padding:
        7px
        10px;

    border:
        1px solid
        rgba(
            var(--mod-glow),
            0.22
        );

    border-radius:
        8px;

    background:
        rgba(
            var(--mod-glow),
            0.045
        );

    color:
        #d8dde7;

    font-size:
        0.76rem;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}


.ark-mod-link:hover {
    border-color:
        rgba(
            var(--mod-glow),
            0.7
        );

    background:
        rgba(
            var(--mod-glow),
            0.12
        );

    color:
        #ffffff;

    box-shadow:
        0
        0
        12px
        rgba(
            var(--mod-glow),
            0.16
        );
}


/*
=========================================================
MOD METADATA STRIP
=========================================================
*/

.ark-mod-meta {
    display:
        grid;

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

    margin:
        0;

    padding:
        0;

    border-top:
        1px solid
        rgba(
            var(--mod-glow),
            0.12
        );

    background:
        rgba(
            255,
            255,
            255,
            0.018
        );
}


.ark-mod-meta-item {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    min-width:
        0;

    padding:
        9px
        14px;
}


.ark-mod-meta-item:not(:last-child) {
    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            0.055
        );
}


.ark-mod-meta-label {
    color:
        #727c8d;

    font-size:
        0.67rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.ark-mod-meta-value {
    overflow:
        hidden;

    color:
        #d9dee7;

    font-size:
        0.8rem;

    font-weight:
        700;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/*
=========================================================
MOD LOADING
=========================================================
*/

.ark-mod-loading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    min-height:
        110px;

    padding:
        20px;

    border:
        1px solid
        #2d3340;

    border-radius:
        13px;

    background:
        #15181f;

    color:
        #8f98a8;

    font-size:
        0.86rem;
}


.ark-mod-loading-spinner {
    width:
        18px;

    height:
        18px;

    border:
        2px solid
        rgba(
            139,
            92,
            246,
            0.18
        );

    border-top-color:
        #8b5cf6;

    border-radius:
        50%;

    animation:
        ark-spin
        0.8s
        linear
        infinite;
}


@keyframes ark-spin {

    to {
        transform:
            rotate(
                360deg
            );
    }

}


/*
=========================================================
MOD ERROR
=========================================================
*/

.ark-mod-error {
    padding:
        22px;

    border:
        1px solid
        rgba(
            220,
            90,
            90,
            0.25
        );

    border-radius:
        14px;

    background:
        rgba(
            90,
            20,
            25,
            0.12
        );
}


.ark-mod-error[hidden] {
    display:
        none;
}


.ark-mod-error-content h2 {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        1.15rem;
}


.ark-mod-error-content p {
    margin:
        8px
        0
        16px;

    color:
        #9ca5b5;

    line-height:
        1.55;
}


.ark-mod-retry {
    padding:
        8px
        14px;

    cursor:
        pointer;

    border:
        1px solid
        #8b5cf6;

    border-radius:
        8px;

    background:
        rgba(
            139,
            92,
            246,
            0.1
        );

    color:
        #ffffff;

    font:
        inherit;

    font-size:
        0.82rem;

    font-weight:
        700;

    transition:
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.ark-mod-retry:hover {
    background:
        rgba(
            139,
            92,
            246,
            0.2
        );

    box-shadow:
        0
        0
        14px
        rgba(
            139,
            92,
            246,
            0.15
        );
}


/*
=========================================================
ANNOUNCEMENTS
=========================================================
*/

.ark-announcement-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;
}


.ark-announcement-card {
    padding:
        20px;

    border:
        1px solid
        #2d3340;

    border-radius:
        13px;

    background:
        #15181f;

    box-shadow:
        0
        0
        14px
        rgba(
            139,
            92,
            246,
            0.035
        );

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.ark-announcement-card:hover {
    border-color:
        rgba(
            139,
            92,
            246,
            0.4
        );

    background:
        #191d25;

    box-shadow:
        0
        0
        20px
        rgba(
            139,
            92,
            246,
            0.1
        );

    transform:
        translateY(
            -1px
        );
}


.ark-announcement-header {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;
}


.ark-announcement-header h3 {
    margin:
        5px
        0
        0;

    color:
        #ffffff;

    font-size:
        1.1rem;
}


.ark-announcement-header time {
    flex:
        0
        0
        auto;

    color:
        #7f8999;

    font-size:
        0.75rem;
}


.ark-announcement-type {
    display:
        inline-block;

    color:
        #8b5cf6;

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


.ark-announcement-card p {
    margin:
        12px
        0
        0;

    color:
        #aab2c1;

    line-height:
        1.65;
}


/*
=========================================================
RESPONSIVE
=========================================================
*/

@media (
    max-width: 760px
) {

    .ark-page,
    .ark-landing {
        gap:
            34px;

        margin:
            0
            auto;

        padding:
            24px
            16px;
    }


    .ark-landing-options,
    .ark-community-buttons {
        grid-template-columns:
            1fr;
    }


    .ark-mod-banner {
        align-items:
            flex-start;

        gap:
            12px;

        padding:
            12px;
    }


    .ark-mod-image-wrap {
        flex-basis:
            66px;

        width:
            66px;

        height:
            66px;
    }


    .ark-mod-heading {
        flex-direction:
            column;

        gap:
            8px;
    }


    .ark-mod-link {
        align-self:
            flex-start;
    }


    .ark-mod-meta {
        grid-template-columns:
            1fr;
    }


    .ark-mod-meta-item:not(:last-child) {
        border-right:
            0;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                0.055
            );
    }


    .ark-announcement-header {
        flex-direction:
            column;

        gap:
            6px;
    }


    .ark-idea-footer {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .ark-idea-submit {
        width:
            100%;
    }

}


@media (
    max-width: 480px
) {

    .ark-hero,
    .ark-community-section,
    .ark-overview {
        padding:
            18px;
    }


    .ark-landing-card {
        min-height:
            130px;

        padding:
            18px;
    }


    .ark-landing-card-action {
        flex-basis:
            36px;

        width:
            36px;

        height:
            36px;
    }


    .ark-mod-banner {
        display:
            grid;

        grid-template-columns:
            58px
            minmax(
                0,
                1fr
            );
    }


    .ark-mod-image-wrap {
        width:
            58px;

        height:
            58px;
    }


    .ark-mod-description {
        line-clamp:
            3;

        -webkit-line-clamp:
            3;
    }

}


/*
=========================================================
REDUCED MOTION
=========================================================
*/

@media (
    prefers-reduced-motion: reduce
) {

    .ark-mod-card,
    .ark-mod-link,
    .ark-landing-card,
    .ark-landing-card-action,
    .ark-community-button,
    .ark-community-button-action,
    .ark-announcement-card,
    .ark-idea-submit,
    .ark-mod-retry {
        transition:
            none;
    }


    .ark-mod-loading-spinner {
        animation:
            none;
    }

}
/*
=========================================================
ANNOUNCEMENT LIST
=========================================================
*/

.ark-announcement-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        0;
}


.ark-announcement-item {
    display:
        grid;

    grid-template-columns:
        28px
        minmax(
            0,
            1fr
        );

    gap:
        14px;

    position:
        relative;
}


.ark-announcement-marker {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    position:
        relative;
}


.ark-announcement-dot {
    width:
        11px;

    height:
        11px;

    flex:
        0
        0
        11px;

    margin-top:
        8px;

    border:
        2px solid
        #8b5cf6;

    border-radius:
        50%;

    background:
        #15181f;

    box-shadow:
        0
        0
        10px
        rgba(
            139,
            92,
            246,
            0.22
        );

    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.ark-announcement-line {
    width:
        1px;

    flex:
        1;

    min-height:
        40px;

    margin-top:
        6px;

    background:
        linear-gradient(
            to bottom,
            rgba(
                139,
                92,
                246,
                0.28
            ),
            rgba(
                139,
                92,
                246,
                0.05
            )
        );
}


.ark-announcement-item:last-child
.ark-announcement-line {
    display:
        none;
}


.ark-announcement-content {
    margin-bottom:
        16px;

    padding:
        16px
        18px;

    border:
        1px solid
        #2d3340;

    border-radius:
        12px;

    background:
        #15181f;

    box-shadow:
        0
        0
        14px
        rgba(
            139,
            92,
            246,
            0.035
        );

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.ark-announcement-item:hover
.ark-announcement-content {
    border-color:
        rgba(
            139,
            92,
            246,
            0.38
        );

    background:
        #191d25;

    box-shadow:
        0
        0
        18px
        rgba(
            139,
            92,
            246,
            0.1
        );

    transform:
        translateY(
            -1px
        );
}


.ark-announcement-item:hover
.ark-announcement-dot {
    box-shadow:
        0
        0
        14px
        rgba(
            139,
            92,
            246,
            0.5
        );

    transform:
        scale(
            1.08
        );
}


.ark-announcement-meta {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px
        12px;

    margin-bottom:
        7px;
}


.ark-announcement-meta time {
    color:
        #7f8999;

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;
}


.ark-announcement-type {
    display:
        inline-flex;

    align-items:
        center;

    padding:
        3px
        7px;

    border:
        1px solid
        rgba(
            139,
            92,
            246,
            0.25
        );

    border-radius:
        999px;

    background:
        rgba(
            139,
            92,
            246,
            0.07
        );

    color:
        #b79cff;

    font-size:
        0.64rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.ark-announcement-title {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        1.05rem;

    line-height:
        1.35;
}


.ark-announcement-description {
    margin:
        8px
        0
        0;

    color:
        #aab2c1;

    font-size:
        0.88rem;

    line-height:
        1.6;
}


.ark-announcement-empty {
    padding:
        20px;

    border:
        1px solid
        #2d3340;

    border-radius:
        12px;

    background:
        #15181f;
}


.ark-announcement-empty p {
    margin:
        4px
        0
        0;

    color:
        #9ca5b5;
}


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

@media (
    max-width: 700px
) {

    .ark-announcement-item {
        grid-template-columns:
            20px
            minmax(
                0,
                1fr
            );

        gap:
            10px;
    }


    .ark-announcement-content {
        padding:
            14px;
    }


    .ark-announcement-meta {
        gap:
            6px
            10px;
    }


    .ark-announcement-title {
        font-size:
            1rem;
    }

}


/*
=========================================================
MOD IMAGE PLACEHOLDER
=========================================================
*/

.ark-mod-image-placeholder {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #8b5cf6;

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    background:
        linear-gradient(
            135deg,
            rgba(
                139,
                92,
                246,
                0.12
            ),
            #101319
        );
}


/*
=========================================================
MOD EMPTY STATE
=========================================================
*/

.ark-mod-empty {
    margin:
        0;

    padding:
        20px;

    border:
        1px solid
        #2d3340;

    border-radius:
        12px;

    background:
        #15181f;

    color:
        #9ca5b5;
}