.game-page{max-width:1120px;width:calc(100% - 32px);margin:28px auto 60px;color:var(--msx-text,#f5eeff);font-family:system-ui,sans-serif}
.game-hero{padding:26px;border:1px solid var(--msx-border,#483254);border-radius:24px;background:linear-gradient(125deg,var(--msx-panel,#20162f),var(--msx-panel-alt,#302046));display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.game-hero h1{margin:6px 0;font-size:clamp(26px,5vw,38px)}
.game-summary{padding:18px 25px;border:1px solid var(--msx-border,#513665);border-radius:18px;background:var(--msx-panel,#1d1527);display:grid;gap:4px}
#gamePoints{font-size:38px;font-weight:800;color:var(--msx-purple,#bd85ff)}
.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:15px;margin:20px 0 32px}
.game-card{padding:22px;border:1px solid var(--msx-border,#49315d);border-radius:18px;background:var(--msx-panel,#21162e);min-width:0}
.game-card h3{margin:9px 0}.game-card p,.game-card small{color:var(--msx-muted,#c1afce);line-height:1.65}
.game-score{color:var(--msx-purple,#c297ff);font-weight:700}.game-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 15px;border-radius:11px;background:var(--msx-button,#7c3aed);color:white!important;text-decoration:none;margin-top:14px}
.game-achievement{text-align:center}.game-medal{font-size:38px;color:var(--msx-muted,#a999b8)}.game-achievement.unlocked{border-color:var(--msx-purple,#b685f9)}.game-achievement.unlocked .game-medal{color:#dcadff}
.game-achievement progress{width:100%;height:9px;accent-color:var(--msx-button,#9c5bdb)}
.game-history{list-style:none;padding:0}.game-history li{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--msx-border,#49315d);padding:14px 0}.game-history time{margin-left:auto;font-size:12px;color:var(--msx-muted,#b6a7c4)}
.game-note{padding:18px;border:1px solid var(--msx-border,#49315d);border-radius:14px;color:var(--msx-muted,#c1afce);line-height:1.7}
@media(max-width:600px){.game-page{width:calc(100% - 24px)}.game-hero{padding:20px}.game-summary{width:100%}.game-grid{grid-template-columns:1fr}.game-history time{width:100%;margin:0}}


/* =========================================================
   MANGASOCIAL BADGES V2
========================================================= */


.game-achievement {

    position: relative;

    overflow: hidden;

    text-align: center;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


.game-achievement:hover {

    transform:
        translateY(-4px);

}


.game-badge-visual {

    width: 150px;
    height: 150px;

    margin:
        0 auto
        12px;

    display: flex;

    align-items: center;
    justify-content: center;

    position: relative;

}


.game-badge-visual img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 12px 25px
            rgba(
                0,
                0,
                0,
                .32
            )
        );

    transition:
        transform .25s ease,
        filter .25s ease,
        opacity .25s ease;

}


.game-achievement:hover
.game-badge-visual img {

    transform:
        scale(1.05);

}


/* BLOQUEADO */


.game-badge-visual.is-locked img {

    filter:
        grayscale(1)
        brightness(.5)
        opacity(.42);

}


.game-badge-visual.is-locked::after {

    content:
        "🔒";

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    display: flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border-radius: 50%;

    font-size: 20px;

    background:
        rgba(
            15,
            10,
            24,
            .85
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .15
        );

}


/* RARIDADE */


.game-badge-rarity {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        5px 10px;

    margin-bottom:
        4px;

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


/* COMUM */


.badge-common
.game-badge-rarity {

    color:
        #ddd6fe;

    background:
        rgba(
            124,
            58,
            237,
            .16
        );

}


/* RARO */


.badge-rare {

    border-color:
        rgba(
            124,
            108,
            255,
            .42
        );

}


.badge-rare
.game-badge-rarity {

    color:
        #c4b5fd;

    background:
        rgba(
            99,
            102,
            241,
            .20
        );

}


/* ÉPICO */


.badge-epic {

    border-color:
        rgba(
            192,
            132,
            252,
            .55
        );

}


.badge-epic
.game-badge-rarity {

    color:
        #e9d5ff;

    background:
        rgba(
            168,
            85,
            247,
            .23
        );

}


/* LENDÁRIO */


.badge-legendary {

    border-color:
        rgba(
            250,
            204,
            21,
            .58
        );

    background:

        radial-gradient(
            circle at top,
            rgba(
                250,
                204,
                21,
                .09
            ),
            transparent 48%
        ),

        var(
            --msx-panel,
            #21162e
        );

}


.badge-legendary
.game-badge-rarity {

    color:
        #fde68a;

    background:
        rgba(
            245,
            158,
            11,
            .18
        );

}


.badge-legendary.unlocked {

    box-shadow:

        0 0 0 1px
        rgba(
            250,
            204,
            21,
            .2
        ),

        0 18px 45px
        rgba(
            245,
            158,
            11,
            .15
        );

}


/* DESBLOQUEADO */


.game-achievement.unlocked
.game-badge-visual img {

    filter:

        drop-shadow(
            0 8px 20px
            rgba(
                139,
                92,
                246,
                .34
            )
        )

        drop-shadow(
            0 0 15px
            rgba(
                250,
                204,
                21,
                .11
            )
        );

}


.game-badge-unlocked {

    display: block;

    margin:
        8px 0;

    color:
        #c4b5fd;

    font-size:
        13px;

}


.game-badge-description {

    min-height:
        48px;

}


/* PERFIL */


.profile-badges-section {

    margin:
        32px 0;

    padding:
        24px;

    border:
        1px solid
        var(
            --msx-border,
            #49315d
        );

    border-radius:
        24px;

    background:

        linear-gradient(
            145deg,
            rgba(
                124,
                58,
                237,
                .07
            ),
            transparent 55%
        ),

        var(
            --msx-panel,
            #21162e
        );

}


.profile-badges-header {

    display: flex;

    align-items: end;
    justify-content: space-between;

    gap: 14px;

    margin-bottom:
        18px;

}


.profile-badges-header h2 {

    margin:
        4px 0 0;

}


.profile-badges-header p {

    margin: 0;

    color:
        var(
            --msx-muted,
            #c1afce
        );

}


.profile-badges-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                180px,
                1fr
            )
        );

    gap:
        14px;

}


.profile-badges-grid
.game-card {

    padding:
        16px;

}


.profile-badges-grid
.game-badge-visual {

    width:
        105px;

    height:
        105px;

}


/* MOBILE */


@media(
    max-width: 600px
) {

    .game-badge-visual {

        width:
            125px;

        height:
            125px;

    }


    .profile-badges-section {

        padding:
            18px;

    }


    .profile-badges-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .profile-badges-grid {

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

    }


    .profile-badges-grid
    .game-card {

        padding:
            12px;

    }


    .profile-badges-grid
    .game-badge-visual {

        width:
            88px;

        height:
            88px;

    }


    .profile-badges-grid
    .game-card h3 {

        font-size:
            14px;

    }


    .profile-badges-grid
    .game-badge-description {

        display:
            none;

    }

}

/* =========================================================
   MangaSocial - MISSÕES / CARDS PADRONIZADOS
========================================================= */

body[data-msx-page="missions"] .game-page {
    width: min(1180px, calc(100% - 40px));
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

/* 3 por linha no desktop */
body[data-msx-page="missions"] .game-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    width: 100%;
}

/*
Cada card possui exatamente 5 áreas:
1. pontos
2. título
3. descrição
4. status
5. botão
*/
body[data-msx-page="missions"] .game-card {
    display: grid !important;

    grid-template-rows:
        28px
        64px
        132px
        64px
        50px;

    gap: 10px;

    min-width: 0;
    width: 100%;
    height: 100%;

    padding: 24px;
    box-sizing: border-box;

    overflow: hidden;
}

/* PONTOS */
body[data-msx-page="missions"] .game-card > .game-score {
    display: flex !important;
    align-items: flex-start;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 28px;
}

/* TÍTULO */
body[data-msx-page="missions"] .game-card > h3 {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.3 !important;

    overflow: hidden;
}

/* DESCRIÇÃO */
body[data-msx-page="missions"] .game-card > p {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.65 !important;

    overflow-wrap: anywhere;
    overflow: hidden;
}

/* STATUS */
body[data-msx-page="missions"] .game-card > small {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.5 !important;

    overflow: hidden;
}

/* BOTÃO */
body[data-msx-page="missions"] .game-card > .game-button {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    justify-self: start;
    align-self: end;

    margin: 0 !important;

    min-height: 46px;

    white-space: normal;
    text-align: center;
}

/* TABLET */
@media (max-width: 1050px) {

    body[data-msx-page="missions"] .game-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

/* CELULAR */
@media (max-width: 650px) {

    body[data-msx-page="missions"] .game-page {
        width: calc(100% - 24px);
    }

    body[data-msx-page="missions"] .game-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body[data-msx-page="missions"] .game-card {
        grid-template-rows:
            auto
            auto
            auto
            auto
            auto;

        padding: 20px;
    }

    body[data-msx-page="missions"] .game-card > .game-button {
        width: 100%;
        justify-self: stretch;
    }
}
/* =========================================================
   MISSÕES - ALINHAMENTO DEFINITIVO
   Escopo direto no container #gameMissions
========================================================= */

#gameMissions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important;
}

#gameMissions > .game-card {
    display: grid !important;

    grid-template-rows:
        28px
        64px
        132px
        64px
        50px !important;

    gap: 10px !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 388px !important;

    padding: 24px !important;
    box-sizing: border-box !important;
}

/* pontuação */
#gameMissions > .game-card > .game-score {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    height: 28px !important;
    line-height: 28px !important;
}

/* título */
#gameMissions > .game-card > h3 {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    height: 64px !important;
    min-height: 64px !important;

    line-height: 1.3 !important;

    overflow: hidden !important;
}

/* descrição */
#gameMissions > .game-card > p {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    height: 132px !important;
    min-height: 132px !important;

    line-height: 1.65 !important;

    overflow: hidden !important;
}

/* status */
#gameMissions > .game-card > small {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    height: 64px !important;
    min-height: 64px !important;

    line-height: 1.5 !important;

    overflow: hidden !important;
}

/* botão */
#gameMissions > .game-card > .game-button {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    justify-self: start !important;
    align-self: end !important;

    margin: 0 !important;

    min-height: 46px !important;
}

/* tablet */
@media (max-width: 1050px) {
    #gameMissions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}

/* celular */
@media (max-width: 650px) {
    #gameMissions {
        grid-template-columns: 1fr !important;
    }

    #gameMissions > .game-card {
        grid-template-rows:
            auto
            auto
            auto
            auto
            auto !important;

        min-height: 0 !important;
    }

    #gameMissions > .game-card > h3,
    #gameMissions > .game-card > p,
    #gameMissions > .game-card > small {
        height: auto !important;
        min-height: 0 !important;
    }

    #gameMissions > .game-card > .game-button {
        width: 100% !important;
        justify-self: stretch !important;
    }
}