/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    min-height: 100%;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: #090b0f;
    color: #eeeeee;
}


/* =========================================================
   BODY
========================================================= */

body {
    min-height: 100vh;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(65, 90, 110, .16),
            transparent 50%
        ),
        #090b0f;
}


/* =========================================================
   COLEÇÃO
========================================================= */

.colecao {

    width: min(
        1100px,
        calc(100% - 48px)
    );

    margin: 0 auto;

    padding:
        70px 0 100px;

    position: relative;

    z-index: 1;
}


/* =========================================================
   CABEÇALHO
========================================================= */

.colecao-header {

    text-align: center;

    margin-bottom: 55px;

}

.colecao-header h1 {

    margin: 0;

    font-size: clamp(
        2rem,
        4vw,
        3.2rem
    );

    font-weight: 500;

    letter-spacing: -.03em;

}

.colecao-header p {

    margin:
        14px 0 0;

    color: #8e949c;

    font-size: .95rem;

}

.colecao-header strong {

    color: #c5cbd1;

    font-weight: 500;

}


/* =========================================================
   GALERIA
========================================================= */

.galeria-rpgs {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                220px,
                280px
            )
        );

    justify-content: center;

    gap: 30px;

}

/* =========================================================
   CARD RPG
========================================================= */

.rpg-card {
    position: relative;
}


/* =========================================================
   BOTÃO
========================================================= */

.rpg-card-botao {

    appearance: none;

    border: 0;

    padding: 0;

    margin: 0;

    width: 100%;

    background: transparent;

    color: inherit;

    font: inherit;

    text-align: left;

    cursor: pointer;

}


/* =========================================================
   MOLDURA EXTERNA
========================================================= */

.rpg-moldura {

    position: relative;

    padding: 5px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(140, 155, 165, .32),
            rgba(70, 80, 88, .18)
        );

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, .40);

    transition:
        transform .5s cubic-bezier(.2, .8, .2, 1),
        background 1.5s ease,
        box-shadow 1.5s ease;

}


/* =========================================================
   CAPA INTERNA
========================================================= */

.rpg-capa {

    position: relative;

    width: 100%;

    aspect-ratio: 3 / 4;

    overflow: hidden;

    border-radius: 14px;

    background:
        #202830;

    isolation: isolate;

}


/* =========================================================
   IMAGEM
========================================================= */

.rpg-capa img {

    position: relative;

    display: block;

    z-index: 3;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: inherit;

    transition:
        filter 1.5s ease,
        opacity 1.5s ease;

}

/* =========================================================
   CAMADAS DE ILUMINAÇÃO
========================================================= */

.rpg-capa {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}


/* =========================================================
   LUZ FRIA — ESTADO NORMAL
========================================================= */

.rpg-aura-fria {

    position: absolute;
    inset: -30%;

    z-index: 2;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(105, 145, 165, .32),
            rgba(65, 85, 100, .18) 42%,
            transparent 72%
        );

    filter: blur(25px);

    opacity: .9;

    transition:
        opacity 1.8s ease;

}


/* =========================================================
   RGB — ONDA
========================================================= */

.rpg-aura-rgb {

    position: absolute;

    inset: -65%;

    z-index: 3;

    pointer-events: none;

    border-radius: 50%;

    background:
        conic-gradient(
            from 0deg,

            rgba(92, 242, 247, .00) 0deg,

            rgba(92, 242, 247, .75) 35deg,

            rgba(237, 17, 49, .70) 75deg,

            rgba(245, 158, 11, .70) 115deg,

            rgba(158, 26, 206, .72) 160deg,

            rgba(52, 214, 55, .65) 205deg,

            rgba(122, 84, 137, .65) 250deg,

            rgba(241, 218, 255, .65) 295deg,

            rgba(255, 0, 140, .70) 335deg,

            rgba(92, 242, 247, .00) 360deg
        );

    filter:
        blur(32px);

    opacity: 0;

    transform:
        scale(.65);

    transition:
        opacity 1.7s ease,
        transform 2.5s ease;

    animation:
        rpg-rgb-wave
        8s linear infinite;

    animation-play-state: paused;

}


/* =========================================================
   VÉU SOBRE A ILUMINAÇÃO
========================================================= */

.rpg-véu {

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(20, 27, 33, .12),
            rgba(10, 13, 17, .18)
        );

}


/* =========================================================
   ONDA
========================================================= */

@keyframes rpg-rgb-wave {

    0% {

        transform:
            scale(.65)
            rotate(0deg);

    }

    50% {

        transform:
            scale(.85)
            rotate(180deg);

    }

    100% {

        transform:
            scale(.65)
            rotate(360deg);

    }

}


/* =========================================================
   HOVER
========================================================= */

.rpg-card-botao:hover
.rpg-aura-fria {

    opacity: 0;

}


.rpg-card-botao:hover
.rpg-aura-rgb {

    opacity: .85;

    transform:
        scale(.85);

    animation-play-state:
        running;

}


/* =========================================================
   FALLBACK
========================================================= */

.rpg-sem-imagem {

    position: absolute;

    inset: 0;

    z-index: 5;

    display: none;

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

    color: #dce4e9;

    font-size: 1.25rem;

    font-weight: 600;

    letter-spacing: .18em;

    text-transform: uppercase;

    background:
        linear-gradient(
            135deg,
            #252e35,
            #151a1f
        );

}


.rpg-capa.sem-imagem
.rpg-sem-imagem {

    display: flex;

}


/* =========================================================
   ANIMAÇÃO DO CARD
========================================================= */

.rpg-card-botao:hover
.rpg-moldura {

    transform:
        translateY(-7px)
        scale(1.025);

}


/* =========================================================
   HOVER — TRANSIÇÃO
========================================================= */

.rpg-card-botao:hover
.rpg-moldura {

    transform:
        translateY(-7px)
        scale(1.025);

    background:
        linear-gradient(
            135deg,
            rgba(150, 165, 175, .42),
            rgba(90, 100, 110, .22)
        );

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, .60);

}


/*
 * O azul acinzentado desaparece
 */

.rpg-card-botao:hover
.rpg-capa::before {

    opacity: 0;

}


.rpg-card-botao:hover
.rpg-aura-fria {

    opacity: 0;

}


/*
 * RGB aparece
 */

.rpg-card-botao:hover
.rpg-aura-rgb {

    opacity: .75;

    transform:
        scale(1);

    animation-play-state:
        running;

}


/* =========================================================
   IMAGEM NO HOVER
========================================================= */

.rpg-card-botao:hover
.rpg-capa img {

    filter:
        saturate(1.05)
        contrast(1.03);

}


/* =========================================================
   FALLBACK — SEM IMAGEM
========================================================= */

.rpg-sem-imagem {

    position: absolute;

    inset: 0;

    z-index: 3;

    display: none;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 20px;

    color: #d8dde1;

    font-size: 1.25rem;

    font-weight: 600;

    letter-spacing: .15em;

    text-transform: uppercase;

    background:
        linear-gradient(
            135deg,
            #242d34,
            #151a1f
        );

}


/*
 * Quando a imagem falhar,
 * .sem-imagem é adicionada pelo onerror.
 */

.rpg-capa.sem-imagem
.rpg-sem-imagem {

    display: flex;

}


/* =========================================================
   INFORMAÇÕES
========================================================= */

.rpg-info {

    position: relative;

    z-index: 10;

    padding:
        15px 3px 0;

}


.rpg-info h2 {

    margin: 0;

    color: #eeeeee;

    font-size: 1.05rem;

    font-weight: 600;

}


.rpg-status {

    display: block;

    margin-top: 6px;

    color: #7e8790;

    font-size: .78rem;

}


/* =========================================================
   PLACEHOLDER
========================================================= */

.rpg-card.indisponivel
    .rpg-card-botao {

    cursor: default;

    opacity: .45;

}


.placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    color: #686f77;

    background:
        linear-gradient(
            135deg,
            #14171b,
            #0f1114
        );

}


.placeholder span {

    font-size: .8rem;

    text-transform: uppercase;

    letter-spacing: .15em;

}


/* =========================================================
   MODAL
========================================================= */

.modal-rpg {

    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

}


.modal-rpg[hidden] {

    display: none;

}


.modal-rpg-fundo {

    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, .78);

    backdrop-filter:
        blur(8px);

}


.modal-rpg-conteudo {

    position: relative;

    z-index: 2;

    width: min(
        720px,
        100%
    );

    display: grid;

    grid-template-columns:
        220px 1fr;

    gap: 30px;

    padding: 30px;

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

    border-radius: 20px;

    background:
        #111419;

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, .7);

}


.modal-fechar {

    position: absolute;

    top: 12px;
    right: 15px;

    width: 36px;
    height: 36px;

    border: 0;

    background: transparent;

    color: #aeb4bb;

    font-size: 1.8rem;

    cursor: pointer;

}


.modal-fechar:hover {

    color: #ffffff;

}


/* =========================================================
   MODAL CAPA
========================================================= */

.modal-capa {

    width: 100%;

    aspect-ratio: 3 / 4;

    border-radius: 13px;

    overflow: hidden;

}


.modal-capa img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


/* =========================================================
   MODAL INFO
========================================================= */

.modal-info {

    padding:
        15px 15px 10px 0;

}


.modal-info h2 {

    margin: 0 0 15px;

    color: #ffffff;

    font-size: 2rem;

    font-weight: 600;

}


.modal-descricao {

    margin: 0;

    color: #9ca3aa;

    line-height: 1.65;

    font-size: .95rem;

}


.modal-detalhes {

    display: flex;

    gap: 35px;

    margin-top: 25px;

}


.modal-detalhes div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.modal-detalhes strong {

    color: #737b84;

    font-size: .7rem;

    text-transform: uppercase;

    letter-spacing: .08em;

}


.modal-detalhes span {

    color: #e3e6e9;

    font-size: .85rem;

}


/* =========================================================
   BOTÃO ENTRAR
========================================================= */

.btn-entrar {

    margin-top: 30px;

    padding:
        11px 18px;

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

    border-radius: 9px;

    background:
        rgba(255, 255, 255, .06);

    color: #ffffff;

    font: inherit;

    cursor: pointer;

    transition:
        background .25s ease,
        transform .25s ease;

}


.btn-entrar:hover {

    background:
        rgba(255, 255, 255, .11);

    transform:
        translateY(-2px);

}

/* =========================================================
   JOGADORES ONLINE
========================================================= */

.rpg-online {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 7px;

    color: #8d969e;

    font-size: .74rem;

    line-height: 1;

}


.rpg-online i {

    display: block;

    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #65d982;

    box-shadow:
        0 0 8px
        rgba(101, 217, 130, .55);

    animation:
        online-pulse
        2.2s ease-in-out infinite;

}


@keyframes online-pulse {

    0%,
    100% {

        opacity: .55;

        transform:
            scale(.85);

    }

    50% {

        opacity: 1;

        transform:
            scale(1);

    }

}


/* =========================================================
   MODAL
========================================================= */

.modal-online {

    display: inline-flex;

    align-items: center;

    gap: 6px;

}


.modal-online::before {

    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #65d982;

    box-shadow:
        0 0 7px
        rgba(101, 217, 130, .5);

}

/* =========================================================
   MODAL — CAPA
========================================================= */

.modal-capa {

    position: relative;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            135deg,
            #252e35,
            #151a1f
        );

}


/* imagem */

.modal-capa img {

    display: block;

    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    object-fit: cover;

}


/* fallback */

.modal-sem-imagem {

    position: absolute;

    inset: 0;

    z-index: 3;

    display: none;

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

    text-align: center;

    color: #dce4e9;

    font-size: 1.4rem;

    font-weight: 600;

    letter-spacing: .18em;

    text-transform: uppercase;

}


.modal-capa.sem-imagem
.modal-sem-imagem {

    display: flex;

}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 650px) {

    .colecao {

        width:
            min(
                100% - 28px,
                400px
            );

        padding-top: 45px;

    }


    .galeria-rpgs {

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

        gap: 18px;

    }


    .rpg-info h2 {

        font-size: .95rem;

    }


    .rpg-status {

        font-size: .7rem;

    }


    .modal-rpg-conteudo {

        grid-template-columns: 1fr;

        max-height: 90vh;

        overflow-y: auto;

        padding: 22px;

    }


    .modal-capa {

        width: 150px;

        margin: 0 auto;

    }


    .modal-info {

        padding: 0;

    }


    .modal-info h2 {

        font-size: 1.6rem;

    }

}