/*====================================================
                TEMA PREMIUM
         Roxo • Preto • Branco
=====================================================*/

:root{

    --roxo:#9674d0;
    --roxo-hover:#8400ff2b;
    --roxo-claro:#cc00ff;
    --roxo-neon:#c026d3;

    --preto:#050505;
    --preto2:#101014;
    --preto3:#18181d;

    --card:rgba(18,18,25,.92);
    --card2:rgba(35,35,45,.95);

    --texto:#ffffff;
    --cinza:#cfcfcf;

}

/*====================================================
                TOTAL DE VOTOS
=====================================================*/

.total-geral{

    max-width:420px;

    margin:0 auto 35px;

    padding:18px;

    text-align:center;

    font-size:24px;

    font-weight:bold;

    color:#fff;

    border-radius:15px;

    background:linear-gradient(
        135deg,
        var(--roxo),
        var(--roxo-hover)
    );

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

    box-shadow:
        0 10px 25px rgba(128, 53, 198, 0.13);

}

.total-geral span{

    color:#fff;

    font-size:30px;

    font-weight:900;

}

/*====================================================
                    FUNDO
=====================================================*/

body{

    margin:0;

    background:radial-gradient(
        circle at top,
        #31104d 0%,
        #101014 35%,
        #050505 100%
    );

    color:var(--texto);

    font-family:Arial,Helvetica,sans-serif;

}

/*====================================================
                    VOTAÇÃO
=====================================================*/

.votacao{

    max-width:1450px;

    margin:60px auto;

    padding:35px;

    border-radius:25px;

    background:rgba(15,15,20,.45);

    backdrop-filter:blur(15px);

    border:1px solid rgba(147,51,234,.18);

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

}

/*====================================================
                    TÍTULO
=====================================================*/

.titulo-votacao{

    font-family:'Trebuchet MS',Arial,sans-serif;

    font-size:40px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:2px;

    text-align:center;

    margin-bottom:45px;

    background:linear-gradient(
        90deg,
        #ffffff,
        #f3e8ff,
        #d8b4fe,
        #a709bc
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    text-shadow:0 0 12px rgba(147,51,234,.35);

}

/*====================================================
                    GRID
=====================================================*/

.videos{

    display:grid;

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

    gap:25px;

    align-items:start;

}

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

.video{

    position:relative;

    display:flex;

    flex-direction:column;

    background:linear-gradient(
        180deg,
        var(--card),
        var(--card2)
    );

    border:1px solid rgba(147,51,234,.20);

    border-radius:22px;

    overflow:hidden;

    backdrop-filter:blur(10px);

    transition:.35s;

    box-shadow:
        0 12px 35px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.05);

}

.video:hover{

    transform:translateY(-10px);

    border-color:var(--roxo-hover);

    box-shadow:
        0 0 30px rgba(147,51,234,.35),
        0 20px 45px rgba(0,0,0,.65);

}

/*====================================================
              PLAYER DO YOUTUBE
=====================================================*/

.video iframe{

    width:100%;

    aspect-ratio:16/9;

    display:block;

    border:none;

    background:#000;

    border-radius:22px 22px 0 0;

    border-bottom:1px solid rgba(147,51,234,.20);

}
/*====================================================
                    TEXTO
=====================================================*/

.video h3{

    color:#fff;

    text-align:center;

    margin:20px 15px 10px;

    font-size:24px;

    font-weight:700;

    text-shadow:0 0 8px rgba(147,51,234,.35);

}

.video p{

    text-align:center;

    color:var(--cinza);

    margin:12px 15px;

    font-size:18px;

    line-height:1.5;

}

.video span{

    color:var(--roxo-claro);

    font-size:28px;

    font-weight:800;

    text-shadow:0 0 10px rgba(192,38,211,.60);

}

/*====================================================
                BOTÃO DE VOTAÇÃO
=====================================================*/

.video button{

    width:88%;

    margin:15px auto 22px;

    padding:15px;

    display:block;

    border:none;

    border-radius:50px;

    cursor:pointer;

    color:#fff;

    font-size:17px;

    font-weight:700;

    background:linear-gradient(
        135deg,
        var(--roxo),
        var(--roxo-hover),
        var(--roxo-neon)
    );

    transition:.35s;

    box-shadow:
        0 10px 20px rgba(147,51,234,.35);

}

.video button:hover{

    transform:translateY(-3px) scale(1.03);

    box-shadow:
        0 0 25px rgba(192,38,211,.60),
        0 12px 25px rgba(0,0,0,.45);

}

.video button:active{

    transform:scale(.98);

}

.video button:disabled{

    background:#4d4d4d;

    color:#ddd;

    cursor:not-allowed;

    box-shadow:none;

    opacity:.75;

}

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

.menu-voltar{

    position:fixed;

    top:55px;

    left:25px;

    width:60px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.menu-voltar a{

    display:flex;

}

.menu-voltar img{

    width:70px;

    height:70px;

    object-fit:contain;

    transition:.35s;

}

.menu-voltar:hover img{

    transform:scale(1.12);

    filter:drop-shadow(0 0 18px rgba(192,38,211,.85));

}

/*====================================================
                CARD VENCEDOR
=====================================================*/

.vencedor{

    position:relative;

    border:2px solid var(--roxo-claro);

    box-shadow:
        0 0 20px rgba(216,180,254,.70),
        0 0 50px rgba(147,51,234,.35);

}

.vencedor::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    padding:2px;

    background:linear-gradient(
        45deg,
        #ffffff,
        #d8b4fe,
        #9333ea,
        #ffffff
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

}

.vencedor::after{

    content:"👑 MAIS VOTADO";

    position:absolute;

    top:15px;

    left:15px;

    padding:8px 15px;

    border-radius:40px;

    background:linear-gradient(
        135deg,
        #ffffff,
        #d8b4fe
    );

    color:#4c1d95;

    font-size:12px;

    font-weight:800;

    letter-spacing:1px;

    box-shadow:
        0 5px 15px rgba(0,0,0,.35);

}
/*====================================================
            RESPONSIVO - ATÉ 415px
=====================================================*/

@media (max-width:415px){

    body{
        overflow-x:hidden;
    }

    .votacao{

        width:95%;

        margin:20px auto;

        padding:18px;

        border-radius:18px;

    }

    .titulo-votacao{

        font-size:24px;

        line-height:1.3;

        letter-spacing:1px;

        margin-bottom:25px;

    }

    .total-geral{

        max-width:100%;

        padding:15px;

        font-size:18px;

        border-radius:12px;

        margin-bottom:20px;

    }

    .total-geral span{

        font-size:24px;

    }

    /* Cards ficam um abaixo do outro */

    .videos{

        grid-template-columns:1fr;

        gap:20px;

    }

    .video{

        border-radius:18px;

    }

    .video iframe{

        border-radius:18px 18px 0 0;

    }

    .video h3{

        font-size:20px;

        margin:16px 10px 8px;

    }

    .video p{

        font-size:15px;

        margin:10px;

        line-height:1.5;

    }

    .video span{

        font-size:22px;

    }

    .video button{

        width:92%;

        padding:14px;

        font-size:15px;

        margin:15px auto 18px;

    }

    /* Botão voltar */

    .menu-voltar{

        top:20px;

        left:5px;

        width:48px;

        height:48px;

    }

    .menu-voltar img{

        width:78px;

        height:78px;

    }

    /* Selo do vencedor */

    .vencedor::after{

        top:10px;

        left:10px;

        padding:6px 12px;

        font-size:10px;

        letter-spacing:.5px;

    }

}