/*==================================================
    MELHOR PLATAFORMAS
    STYLE.CSS
==================================================*/

/*==============================
RESET
==============================*/
@import url("footer.css");

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#0d7a39;

    color:#fff;

    overflow-x:hidden;

}

/*==============================
VARIÁVEIS
==============================*/

:root{

    --verde:#0d7a39;
    --verde-dark:#08612c;
    --verde-card:#12873f;
    --verde-hover:#1fc75d;

    --botao:#19cc5f;
    --botao-hover:#2ef779;

    --amarelo:#ffd633;

    --texto:#ffffff;
    --cinza:#dcdcdc;

    --radius:18px;

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

}

/*==============================
SCROLL
==============================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#0a5b2b;

}

::-webkit-scrollbar-thumb{

    background:#23d363;

    border-radius:30px;

}

/*==============================
GERAL
==============================*/

img{

    display:block;

    max-width:100%;

}

button{

    font-family:'Poppins',sans-serif;

}

a{

    color:inherit;

    text-decoration:none;

}

.container{

    width:min(1400px,95%);

    margin:auto;

}

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

.topo{

    position:sticky;

    top:0;

    z-index:999;

    height:70px;

    background:var(--verde-dark);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 18px;

    box-shadow:var(--shadow);

}

.menu-esquerda{

    display:flex;

    align-items:center;

    gap:15px;

}

.menu-btn{

    width:46px;

    height:46px;

    border:none;

    border-radius:14px;

    background:var(--verde-card);

    color:white;

    cursor:pointer;

    font-size:20px;

    transition:.3s;

}

.menu-btn:hover{

    background:var(--verde-hover);

    transform:scale(1.05);

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo img{

    width:42px;

    height:42px;

    object-fit:contain;

}

.logo h1{

    font-size:19px;

    font-weight:700;

    line-height:18px;

}

.logo p{

    font-size:11px;

    opacity:.75;

}

.acoes{

    display:flex;

    gap:10px;

}

.pesquisa{

    width:46px;

    height:46px;

    border:none;

    border-radius:14px;

    background:var(--verde-card);

    color:white;

    cursor:pointer;

    font-size:18px;

    transition:.3s;

}

.pesquisa:hover{

    background:var(--verde-hover);

}

/*==============================
SIDEBAR
==============================*/

.sidebar{

    position:fixed;

    top:0;

    left:-320px;

    width:300px;

    height:100vh;

    background:#0a5c2b;

    transition:.35s;

    z-index:1000;

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

}

.sidebar.active{

    left:0;

}

.sidebar-top{

    height:70px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 20px;

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

}

.sidebar-top h2{

    font-size:22px;

}

#fecharMenu{

    width:42px;

    height:42px;

    border:none;

    border-radius:12px;

    background:var(--verde-card);

    color:white;

    cursor:pointer;

}

.sidebar nav{

    display:flex;

    flex-direction:column;

    padding:15px;

}

.sidebar nav a{

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px;

    border-radius:14px;

    transition:.3s;

}

.sidebar nav a:hover{

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

}

.sidebar nav i{

    width:22px;

    font-size:20px;

}

#overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

}

#overlay.active{

    opacity:1;

    visibility:visible;

}

/*==============================
CATEGORIAS
==============================*/

.categorias{

    display:flex;

    gap:10px;

    overflow-x:auto;

    padding:15px;

    background:#0b6d33;

    scrollbar-width:none;

}

.categorias::-webkit-scrollbar{

    display:none;

}

.categoria{

    white-space:nowrap;

    border:none;

    padding:12px 18px;

    border-radius:30px;

    background:var(--verde-card);

    color:white;

    cursor:pointer;

    transition:.3s;

    font-size:14px;

}

.categoria:hover{

    background:var(--verde-hover);

}

.categoria.ativa{

    background:var(--amarelo);

    color:#222;

    font-weight:700;

}

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

.banner{

    width:100%;

    padding:15px;

}

.banner img{

    width:100%;

    border-radius:20px;

    display:block;

    box-shadow:var(--shadow);

}

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

.titulo{

    padding:15px 20px;

}

.titulo h2{

    font-size:28px;

    font-weight:700;

}

.titulo p{

    margin-top:8px;

    color:#e6e6e6;

    font-size:14px;

}/*==========================================
CARDS PREMIUM
==========================================*/

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));

    gap:20px;

    padding:20px;

    padding-bottom:120px;

}

.card{

    background:linear-gradient(180deg,#159246,#11833f);

    border-radius:20px;

    overflow:hidden;

    position:relative;

    box-shadow:0 12px 30px rgba(0,0,0,.28);

    transition:.35s;

}

.card::before{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:60%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.8s;

}

.card:hover::before{

    left:180%;

}

.card:hover{

    transform:translateY(-8px);

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

}

.card img{

    width:100%;

    height:190px;

    object-fit:cover;

    transition:.4s;

}

.card:hover img{

    transform:scale(1.05);

}

.card-body{

    padding:18px;

}

.card-body h3{

    font-size:20px;

    margin-bottom:8px;

}

.card-body p{

    color:#ececec;

    font-size:14px;

    line-height:22px;

    margin-bottom:15px;

}

.avaliacao{

    color:#FFD700;

    margin-bottom:15px;

    font-size:17px;

}

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

.btn-jogar{

    width:100%;

    height:50px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    background:linear-gradient(90deg,#19cc5f,#31ef79);

    color:white;

    font-size:16px;

    font-weight:700;

    transition:.3s;

}

.btn-jogar:hover{

    transform:translateY(-2px);

    box-shadow:0 0 20px rgba(49,239,121,.5);

}

/*==========================================
NEWSLETTER
==========================================*/

.newsletter{

    padding:30px 20px;

}

.newsletter-box{

    background:#11853f;

    border-radius:20px;

    padding:30px;

    text-align:center;

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

}

.newsletter h2{

    font-size:28px;

    margin-bottom:10px;

}

.newsletter p{

    margin-bottom:20px;

    color:#f1f1f1;

}

.newsletter form{

    display:flex;

    justify-content:center;

    gap:12px;

    flex-wrap:wrap;

}

.newsletter input{

    width:330px;

    max-width:100%;

    height:50px;

    border:none;

    border-radius:12px;

    padding:0 15px;

    outline:none;

}

.newsletter button{

    height:50px;

    padding:0 25px;

    border:none;

    border-radius:12px;

    background:#FFD633;

    color:#222;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.newsletter button:hover{

    transform:scale(1.03);

}

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

.footer{
    position: relative;
    width: 100%;
}

/*==========================================
ANIMAÇÕES
==========================================*/

.fade{

    animation:fade .6s ease;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.04);

    }

    100%{

        transform:scale(1);

    }

}

.glow{

    animation:glow 2s infinite;

}

@keyframes glow{

    0%{

        box-shadow:0 0 5px rgba(46,247,121,.2);

    }

    50%{

        box-shadow:0 0 25px rgba(46,247,121,.5);

    }

    100%{

        box-shadow:0 0 5px rgba(46,247,121,.2);

    }

}

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

@media(max-width:1200px){

.cards{

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

}

}

@media(max-width:992px){

.cards{

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

}

}

@media(max-width:768px){

.logo p{

display:none;

}

.logo h1{

font-size:17px;

}

.cards{

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

gap:14px;

padding:15px;

}

.card img{

height:150px;

}

.newsletter-box{

padding:20px;

}

.newsletter h2{

font-size:22px;

}

}

@media(max-width:480px){

.topo{

height:65px;

padding:0 12px;

}

.menu-btn,

.pesquisa{

width:42px;

height:42px;

font-size:18px;

}

.logo img{

width:36px;

height:36px;

}

.logo h1{

font-size:16px;

}

.cards{

grid-template-columns:1fr;

padding:12px;

gap:16px;

}

.card{

border-radius:18px;

}

.card img{

height:190px;

}

.card-body{

padding:15px;

}

.card-body h3{

font-size:18px;

}

.btn-jogar{

height:48px;

font-size:15px;

}

footer{

height:65px;

}

footer nav{

height:65px;

}

footer nav i{

font-size:20px;

}

footer nav span{

font-size:11px;

}

.newsletter{

padding:20px 12px 100px;

}

.newsletter input{

width:100%;

}

.newsletter button{

width:100%;

}

}/*==================================================
BADGES
==================================================*/

.badge-area{

    position:absolute;

    top:12px;

    left:12px;

    display:flex;

    gap:8px;

    z-index:5;

    flex-wrap:wrap;

}

.badge{

    padding:6px 12px;

    border-radius:30px;

    font-size:11px;

    font-weight:700;

    color:#fff;

    text-transform:uppercase;

    letter-spacing:.5px;

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

    animation:badgePulse 2s infinite;

}

.badge.destaque{

    background:linear-gradient(90deg,#ff9800,#ffc107);

    color:#222;

}

.badge.novo{

    background:linear-gradient(90deg,#00c853,#64dd17);

}

.badge.promocao{

    background:linear-gradient(90deg,#ff1744,#ff5252);

}

@keyframes badgePulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

/*==================================================
BÔNUS
==================================================*/

.bonus{

    margin-top:12px;

    margin-bottom:18px;

    padding:12px;

    border-radius:12px;

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

    color:#ffe082;

    font-size:14px;

    font-weight:600;

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

}

/*==================================================
SEM RESULTADO
==================================================*/

.sem-resultado{

    width:100%;

    text-align:center;

    padding:80px 20px;

}

.sem-resultado h2{

    font-size:30px;

    margin-bottom:15px;

}

.sem-resultado p{

    color:#ddd;

    font-size:16px;

}

/*==================================================
PAGINAÇÃO
==================================================*/

#paginacao{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

    margin:35px 0;

}

.pagina-btn{

    width:45px;

    height:45px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    background:#12873f;

    color:#fff;

    font-weight:700;

    transition:.3s;

}

.pagina-btn:hover{

    background:#1ed760;

    transform:translateY(-3px);

}

.pagina-btn.ativa{

    background:#FFD633;

    color:#222;

    box-shadow:0 0 18px rgba(255,214,51,.5);

}

/*==================================================
TOAST
==================================================*/

.toast{

    position:fixed;

    right:20px;

    bottom:95px;

    background:#12873f;

    color:#fff;

    padding:15px 20px;

    border-radius:15px;

    font-size:15px;

    font-weight:600;

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

    opacity:0;

    transform:translateY(30px);

    transition:.35s;

    z-index:9999;

}

.toast.mostrar{

    opacity:1;

    transform:translateY(0);

}

/*==================================================
SKELETON LOADING
==================================================*/

.skeleton{

    overflow:hidden;

    animation:none;

}

.skeleton-img{

    width:100%;

    height:190px;

    background:#2b9954;

    animation:loading 1.5s infinite;

}

.skeleton-title{

    width:70%;

    height:20px;

    border-radius:6px;

    margin:18px;

    background:#2b9954;

    animation:loading 1.5s infinite;

}

.skeleton-text{

    width:90%;

    height:14px;

    border-radius:5px;

    margin:12px 18px;

    background:#2b9954;

    animation:loading 1.5s infinite;

}

.skeleton-button{

    width:85%;

    height:48px;

    margin:20px auto;

    border-radius:12px;

    background:#2b9954;

    animation:loading 1.5s infinite;

}

@keyframes loading{

0%{

opacity:.35;

}

50%{

opacity:.9;

}

100%{

opacity:.35;

}

}

/*==================================================
ESTATÍSTICAS
==================================================*/

.estatisticas{

    display:grid;

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

    gap:20px;

    margin:40px 20px;

}

.estatistica{

    background:#12873f;

    border-radius:18px;

    padding:25px;

    text-align:center;

    box-shadow:0 10px 20px rgba(0,0,0,.2);

}

.estatistica h3{

    font-size:34px;

    margin-bottom:10px;

}

.estatistica p{

    color:#ddd;

}

/*==================================================
BOTÃO VOLTAR AO TOPO
==================================================*/

#voltarTopo{

    position:fixed;

    right:20px;

    bottom:170px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#1ED760;

    color:#fff;

    cursor:pointer;

    font-size:22px;

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

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

}

#voltarTopo.mostrar{

    opacity:1;

    visibility:visible;

}

#voltarTopo:hover{

    transform:translateY(-4px);

}/*==================================================
EFEITOS PREMIUM
==================================================*/

/* Brilho passando sobre os cards */

.card{

    position:relative;

    overflow:hidden;

}

.card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-60%;

    width:60%;

    height:300%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );

    transform:rotate(25deg);

    transition:1s;

    pointer-events:none;

}

.card:hover::after{

    left:150%;

}

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

.card:hover{

    transform:

        translateY(-10px)

        scale(1.02);

}

.card:hover .btn-jogar{

    transform:scale(1.04);

}

.card:hover h3{

    color:#FFD633;

    transition:.3s;

}

.card:hover .bonus{

    background:rgba(255,214,51,.12);

    border-color:#FFD633;

}

/*==================================================
EFEITO GLASSMORPHISM
==================================================*/

.glass{

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

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

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

    border-radius:20px;

}

/*==================================================
SOMBRAS
==================================================*/

.shadow-sm{

    box-shadow:

    0 4px 12px rgba(0,0,0,.15);

}

.shadow{

    box-shadow:

    0 12px 25px rgba(0,0,0,.25);

}

.shadow-lg{

    box-shadow:

    0 25px 50px rgba(0,0,0,.35);

}

.shadow-green{

    box-shadow:

    0 0 25px rgba(40,255,120,.35);

}

/*==================================================
EFEITO NEON
==================================================*/

.neon{

    box-shadow:

    0 0 8px rgba(0,255,120,.30),

    0 0 18px rgba(0,255,120,.25),

    0 0 30px rgba(0,255,120,.20);

}

.neon:hover{

    box-shadow:

    0 0 12px rgba(0,255,120,.45),

    0 0 28px rgba(0,255,120,.35),

    0 0 40px rgba(0,255,120,.30);

}

/*==================================================
SCROLL REVEAL
==================================================*/

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/*==================================================
FADE
==================================================*/

.fade-up{

    animation:fadeUp .7s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-left{

    animation:fadeLeft .7s ease forwards;

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-30px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.fade-right{

    animation:fadeRight .7s ease forwards;

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(30px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.zoom{

    animation:zoom .5s ease;

}

@keyframes zoom{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*==================================================
EFEITOS PARA BOTÕES
==================================================*/

button{

    transition:

        .30s ease;

}

button:hover{

    filter:brightness(108%);

}

button:active{

    transform:scale(.96);

}

/*==================================================
ÍCONE COM ROTAÇÃO
==================================================*/

.rotate-hover{

    transition:.35s;

}

.rotate-hover:hover{

    transform:rotate(180deg);

}

/*==================================================
LINKS
==================================================*/

a{

    transition:.30s;

}

a:hover{

    color:#FFD633;

}

/*==================================================
IMAGENS
==================================================*/

img{

    transition:.40s;

}

.zoom-img{

    overflow:hidden;

}

.zoom-img img:hover{

    transform:scale(1.08);

}

/*==================================================
BANNER PREMIUM
==================================================*/

.banner{

    position:relative;

}

.banner img{

    border-radius:22px;

}

.banner::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    background:

    linear-gradient(

        to top,

        rgba(0,0,0,.35),

        transparent

    );

    pointer-events:none;

}

/*==================================================
SCROLLBAR PREMIUM
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#08612c;

}

::-webkit-scrollbar-thumb{

    background:

    linear-gradient(

        #1ED760,

        #12b84e

    );

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:

    linear-gradient(

        #32ff7e,

        #1ED760

    );

}

/*==================================================
SELEÇÃO DE TEXTO
==================================================*/

::selection{

    background:#FFD633;

    color:#222;

}

/*==================================================
FOCO
==================================================*/

input:focus,

select:focus,

textarea:focus{

    outline:none;

    border-color:#1ED760;

    box-shadow:

        0 0 0 4px

        rgba(30,215,96,.18);

}

/*==================================================
TRANSIÇÕES GLOBAIS
==================================================*/

*{

    transition:

    background-color .25s,

    color .25s,

    border-color .25s;

}/*==================================================
PARTE 5
RESPONSIVIDADE • MODO ESCURO • UTILITÁRIOS
CORREÇÕES • OTIMIZAÇÕES
==================================================*/

/*==================================================
UTILITÁRIOS
==================================================*/

.hidden{

    display:none !important;

}

.block{

    display:block;

}

.inline{

    display:inline-block;

}

.flex{

    display:flex;

}

.grid{

    display:grid;

}

.center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.space-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.column{

    display:flex;

    flex-direction:column;

}

.wrap{

    flex-wrap:wrap;

}

.gap-5{

    gap:5px;

}

.gap-10{

    gap:10px;

}

.gap-15{

    gap:15px;

}

.gap-20{

    gap:20px;

}

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.w-100{

    width:100%;

}

.h-100{

    height:100%;

}

.round{

    border-radius:50%;

}

.radius{

    border-radius:18px;

}

.radius-sm{

    border-radius:10px;

}

.radius-lg{

    border-radius:25px;

}

.m-auto{

    margin:auto;

}

/*==================================================
ESPAÇAMENTOS
==================================================*/

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}

.pt-20{padding-top:20px;}
.pb-20{padding-bottom:20px;}

.p-10{padding:10px;}
.p-15{padding:15px;}
.p-20{padding:20px;}
.p-30{padding:30px;}

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

.container{

    width:min(1400px,95%);

    margin:auto;

}

.section{

    padding:40px 0;

}

/*==================================================
CARDS
==================================================*/

.cards{

    align-items:stretch;

}

.card{

    display:flex;

    flex-direction:column;

}

.card-body{

    display:flex;

    flex-direction:column;

    flex:1;

}

.card-body .btn-jogar{

    margin-top:auto;

}

/*==================================================
BOTÕES
==================================================*/

button:disabled{

    opacity:.55;

    cursor:not-allowed;

}

.btn-outline{

    background:transparent;

    border:2px solid #1ED760;

    color:#fff;

}

.btn-outline:hover{

    background:#1ED760;

}

/*==================================================
FORMULÁRIOS
==================================================*/

input,

textarea,

select{

    font-family:inherit;

    font-size:15px;

}

textarea{

    resize:vertical;

}

/*==================================================
IMAGENS
==================================================*/

img{

    user-select:none;

    -webkit-user-drag:none;

}

/*==================================================
LINKS
==================================================*/

a{

    outline:none;

}

a:focus-visible{

    outline:2px solid #FFD633;

    outline-offset:4px;

}

/*==================================================
MODO ESCURO AUTOMÁTICO
==================================================*/

@media (prefers-color-scheme: dark){

body{

background:#065227;

color:#fff;

}

.topo{

background:#043e1c;

}

.sidebar{

background:#032f15;

}

.card{

background:#0b6d33;

}

footer{

background:#043e1c;

}

}

/*==================================================
TABLETS
==================================================*/

@media(max-width:992px){

.container{

width:96%;

}

.cards{

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

}

.logo h1{

font-size:18px;

}

.banner{

padding:12px;

}

}

/*==================================================
CELULARES
==================================================*/

@media(max-width:768px){

.topo{

height:64px;

padding:0 12px;

}

.logo{

gap:8px;

}

.logo img{

width:34px;

height:34px;

}

.logo h1{

font-size:16px;

}

.menu-btn,

.pesquisa{

width:40px;

height:40px;

}

.cards{

grid-template-columns:1fr;

gap:16px;

padding:12px;

}

.card img{

height:180px;

}

.newsletter form{

flex-direction:column;

}

.newsletter input,

.newsletter button{

width:100%;

}

footer{

height:65px;

}

footer nav span{

font-size:11px;

}

}

/*==================================================
TELAS MUITO PEQUENAS
==================================================*/

@media(max-width:480px){

.titulo h2{

font-size:24px;

}

.card{

border-radius:16px;

}

.card-body{

padding:15px;

}

.card-body h3{

font-size:18px;

}

.btn-jogar{

height:48px;

font-size:15px;

}

.badge{

font-size:10px;

padding:5px 10px;

}

.toast{

left:12px;

right:12px;

bottom:85px;

text-align:center;

}

}

/*==================================================
TELAS GRANDES
==================================================*/

@media(min-width:1600px){

.container{

max-width:1550px;

}

.cards{

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

}

}

/*==================================================
PERFORMANCE
==================================================*/

.card,

.banner img,

.btn-jogar{

will-change:transform;

}

.card img{

backface-visibility:hidden;

}

button,

a{

-webkit-tap-highlight-color:transparent;

}

/*==================================================
CORREÇÕES FINAIS
==================================================*/

html{

overflow-x:hidden;

}

body{

min-height:100vh;

}

main{

display:block;

}

footer{

left:0;

bottom:0;

}

.sidebar{

overflow-y:auto;

}

.banner img,

.card img{

display:block;

}

button{

border:none;

}

input,

textarea,

select,

button{

outline:none;

}

/*================ ESTRELAS ================*/

.avaliacao{

    margin-top:12px;

    display:flex;

    align-items:center;

    gap:8px;

    color:#FFD700;

    font-size:15px;

}

.avaliacao span{

    color:#fff;

    font-weight:700;

}

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

.btn-notificacao{

    display:block;

    margin:0 20px 20px;

    text-align:center;

    padding:15px;

    border-radius:14px;

    text-decoration:none;

    background:linear-gradient(90deg,#00d65f,#00ff88);

    color:#111;

    font-weight:700;

    transition:.35s;

    box-shadow:0 0 20px rgba(0,255,120,.35);

}

.btn-notificacao:hover{

    transform:translateY(-3px);

    box-shadow:0 0 35px rgba(0,255,120,.55);

}

/*================ BARRA ================*/

.barra{

    height:5px;

    background:#1d1d1d;

}

#barraTempo{

    width:100%;

    height:100%;

    background:linear-gradient(90deg,#00d65f,#00ff88);

    animation:tempoNotificacao 8s linear forwards;

}

@keyframes tempoNotificacao{

from{

width:100%;

}

to{

width:0;

}

}

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

@media(max-width:768px){

.notificacao{

left:10px;

right:10px;

bottom:105px;

width:auto;

}

.logo-area{

width:60px;

height:60px;

}

.conteudo h3{

font-size:18px;

}

.btn-notificacao{

padding:13px;

}

}

/*==================================================
                BARRA +18
==================================================*/

.barra-18{

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:12px 20px;

    background:rgba(12,12,12,.96);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    border-top:2px solid #00ff88;

    box-shadow:0 -5px 25px rgba(0,255,136,.20);

    z-index:9999;

}

.barra-18 .selo{

    display:flex;

    align-items:center;

    justify-content:center;

    width:48px;

    height:48px;

    border-radius:50%;

    background:#00ff88;

    color:#111;

    font-size:20px;

    font-weight:800;

    box-shadow:0 0 18px rgba(0,255,136,.55);

    animation:pulso18 2s infinite;

}

.barra-18 p{

    margin:0;

    color:#ffffff;

    font-size:14px;

    line-height:1.5;

    font-weight:500;

}

.barra-18 strong{

    color:#00ff88;

}

@keyframes pulso18{

    0%{

        transform:scale(1);

        box-shadow:0 0 0 rgba(0,255,136,.35);

    }

    50%{

        transform:scale(1.08);

        box-shadow:0 0 22px rgba(0,255,136,.8);

    }

    100%{

        transform:scale(1);

        box-shadow:0 0 0 rgba(0,255,136,.35);

    }

}

@media (max-width:768px){

    .barra-18{

        padding:10px 15px;

        gap:10px;

    }

    .barra-18 .selo{

        width:42px;

        height:42px;

        font-size:18px;

    }

    .barra-18 p{

        font-size:13px;

    }

}

/*==================================================
                SELO +18
==================================================*/

.selo-18{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    min-width:52px;

    border-radius:50%;

    background:linear-gradient(135deg,#00d65f,#00ff88);

    color:#111;

    font-size:18px;

    font-weight:800;

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

    box-shadow:
        0 0 12px rgba(0,255,136,.45),
        0 0 30px rgba(0,255,136,.25);

    animation:selo18Pulse 2s ease-in-out infinite;

    user-select:none;

}

@keyframes selo18Pulse{

    0%,100%{

        transform:scale(1);

        box-shadow:
            0 0 12px rgba(0,255,136,.45),
            0 0 30px rgba(0,255,136,.25);

    }

    50%{

        transform:scale(1.08);

        box-shadow:
            0 0 20px rgba(0,255,136,.8),
            0 0 40px rgba(0,255,136,.45);

    }

}

@media (max-width:768px){

    .selo-18{

        width:46px;

        height:46px;

        min-width:46px;

        font-size:16px;

    }

}

/*================ MENU INFERIOR ================*/

.bottom-menu{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:72px;

    display:flex;
    justify-content:space-around;
    align-items:center;

    background:#0a5c2b;
    border-top:2px solid #19cc5f;
    box-shadow:0 -6px 20px rgba(0,0,0,.35);

    z-index:9998;
}

.bottom-menu a{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;

    color:#ffffff;
    text-decoration:none;
    transition:.3s;
}

.bottom-menu a i{
    font-size:22px;
}

.bottom-menu a span{
    font-size:12px;
    font-weight:600;
}

.bottom-menu a:hover,
.bottom-menu a.active{
    color:#FFD633;
}

.bottom-menu a.active i{
    transform:translateY(-3px);
}

@media (min-width:769px){
    .bottom-menu{
        display:none;
    }
}

/*================ MENU INFERIOR =================*/

.bottom-menu{
    position:fixed;
    left:0;
    bottom:70px; /* acima da barra +18 */
    width:100%;
    height:70px;

    display:flex !important;
    justify-content:space-around;
    align-items:center;

    background:#0b6d33;
    border-top:2px solid #00ff88;
    box-shadow:0 -8px 25px rgba(0,0,0,.35);

    z-index:10000;
}

.bottom-menu a{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    color:#fff;
    font-size:12px;
    font-weight:600;
    gap:5px;
}

.bottom-menu a i{
    font-size:22px;
}

.bottom-menu a.active{
    color:#FFD633;
}

.bottom-menu a:hover{
    color:#00ff88;
}

/* Barra +18 abaixo do menu */

.barra-18{
    bottom:0 !important;
    z-index:9999;
}

@media (max-width:768px){
    .bottom-menu{
        display:flex !important;
    }
}

@media (min-width:769px){
    .bottom-menu{
        display:none;
    }
}

/*================ BOTÃO JOGO RESPONSÁVEL ================*/

.btn-jogo-responsavel{
    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 16px;

    background:linear-gradient(135deg,#00d65f,#00ff88);
    color:#111;
    text-decoration:none;

    border-radius:14px;

    font-weight:700;
    font-size:14px;

    box-shadow:0 8px 20px rgba(0,255,136,.30);

    transition:.3s;
}

.btn-jogo-responsavel:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(0,255,136,.45);
}

.btn-jogo-responsavel i{
    font-size:18px;
}

@media(max-width:768px){
    .btn-jogo-responsavel span{
        display:none;
    }

    .btn-jogo-responsavel{
        width:46px;
        height:46px;
        padding:0;
        justify-content:center;
        border-radius:50%;
    }
}

/*==================================================
NOTIFICAÇÃO PREMIUM COMPACTA
==================================================*/

.notificacao{
    position:fixed;
    right:10px;
    bottom:85px;
    width:260px;
    max-width:260px;

    background:rgba(18,25,18,.96);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(0,255,120,.20);
    border-radius:16px;

    overflow:hidden;

    z-index:9999;

    box-shadow:
        0 10px 30px rgba(0,0,0,.45),
        0 0 18px rgba(0,255,120,.18);

    opacity:0;
    visibility:hidden;
    transform:translateX(100px);
    transition:.35s;
}

.notificacao.mostrar{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
}

/*==============================*/

.notificacao-topo{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 12px;
    background:linear-gradient(90deg,#0d3b1f,#126a34);
}

.status-online{
    display:flex;
    align-items:center;
    gap:6px;
    color:#fff;
    font-size:11px;
    font-weight:700;
}

.bolinha{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#00ff6a;
    animation:pulsar 1s infinite;
}

.badge-alta{
    padding:4px 8px;
    border-radius:20px;
    background:#ff9800;
    color:#fff;
    font-size:10px;
    font-weight:700;
}

.notificacao-fechar{
    position:absolute;
    top:8px;
    right:8px;
    width:28px;
    height:28px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    cursor:pointer;
}

/*==============================*/

/*==================================================
LOGO
==================================================*/

.notificacao-logo{
    display:flex;
    justify-content:center;
    margin-top:8px;
}

.notificacao-logo img{
    width:45px;
    height:45px;
    object-fit:contain;
}

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

#notificacaoTitulo{
    margin:6px 0;
    text-align:center;
    color:#00ff88;
    font-size:18px;
    font-weight:800;
}

/*==================================================
AVALIAÇÃO
==================================================*/

.avaliacao{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    margin-bottom:8px;
    color:#FFD54F;
    font-size:13px;
}

.avaliacao strong{
    color:#fff;
}

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

.notificacao-info{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    padding:10px;
}

.notificacao-info div{
    display:flex;
    align-items:center;
    gap:6px;

    min-height:42px;

    padding:8px;

    background:#1b1b1b;
    color:#fff;

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

    font-size:11px;
    line-height:1.3;

    transition:.3s;
}

.notificacao-info div:hover{
    border-color:#00ff88;
    background:#222;
}

.notificacao-info strong{
    color:#00ff88;
}

/*==================================================
POPULARIDADE
==================================================*/

.popularidade{
    padding:8px 10px;
}

.popularidade-topo{
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#fff;
    font-size:12px;
    margin-bottom:6px;
}

.barra-popularidade{
    width:100%;
    height:7px;
    background:#2b2b2b;
    border-radius:20px;
    overflow:hidden;
}

.barra-preenchida{
    width:96%;
    height:100%;
    background:linear-gradient(90deg,#00d84f,#00ff88);
}

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

.btn-notificacao{
    display:flex;
    justify-content:center;
    align-items:center;

    width:calc(100% - 20px);
    height:40px;

    margin:0 10px 10px;

    background:linear-gradient(90deg,#00b84d,#00ff88);

    color:#fff;
    text-decoration:none;

    border-radius:10px;

    font-size:14px;
    font-weight:700;

    transition:.3s;
}

.btn-notificacao:hover{
    transform:scale(1.03);
}

/*==================================================
BARRA DE TEMPO
==================================================*/

.tempo{
    width:100%;
    height:4px;
    background:#222;
}

#barraTempo{
    width:100%;
    height:100%;
    background:#00ff88;
    animation:tempoNotificacao 8s linear forwards;
}

@keyframes tempoNotificacao{
    from{
        width:100%;
    }
    to{
        width:0;
    }
}

@keyframes pulsar{
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.3);
    }
    100%{
        transform:scale(1);
    }
}

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

@media(max-width:768px){

    .notificacao-logo img{
        width:42px;
        height:42px;
    }

    #notificacaoTitulo{
        font-size:17px;
    }

    .avaliacao{
        font-size:12px;
    }

    .notificacao-info{
        grid-template-columns:repeat(2,1fr);
        gap:6px;
        padding:8px;
    }

    .notificacao-info div{
        min-height:38px;
        padding:7px;
        font-size:10px;
    }

    .btn-notificacao{
        height:38px;
        font-size:13px;
    }

}

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

@media(max-width:768px){

    .notificacao{
        width:240px;
        max-width:240px;
        right:8px;
        bottom:82px;
        border-radius:14px;
    }

    .notificacao-logo img{
        width:48px;
        height:48px;
    }

    #notificacaoTitulo{
        font-size:18px;
    }

    .avaliacao{
        font-size:13px;
    }

    .notificacao-info div{
        font-size:11px;
        padding:7px 9px;
    }

    .btn-notificacao{
        height:40px;
        font-size:14px;
    }

}

/*==============================*/

.popularidade{
    padding:0 22px 20px;
}

.popularidade-topo{
    display:flex;
    justify-content:space-between;
    color:#fff;
    margin-bottom:8px;
}

.barra-popularidade{
    height:10px;
    background:#2b2b2b;
    border-radius:20px;
    overflow:hidden;
}

.barra-preenchida{
    width:96%;
    height:100%;
    background:linear-gradient(90deg,#00d84f,#00ff88);
    border-radius:20px;
}

/*==============================*/

.btn-notificacao{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 22px 20px;
    height:58px;
    border-radius:16px;
    background:linear-gradient(90deg,#00b84d,#00ff88);
    color:#fff;
    font-size:20px;
    font-weight:800;
    text-decoration:none;
    box-shadow:0 0 18px rgba(0,255,120,.4);
    transition:.3s;
}

.btn-notificacao:hover{
    transform:scale(1.03);
    box-shadow:0 0 30px rgba(0,255,120,.8);
}

/*==============================*/

.tempo{
    width:100%;
    height:5px;
    background:#222;
}

#barraTempo{
    width:100%;
    height:100%;
    background:#00ff88;
    animation:tempoNotificacao 8s linear forwards;
}

/*==============================*/

@keyframes tempoNotificacao{
    from{width:100%;}
    to{width:0;}
}

@keyframes pulsar{
    0%{transform:scale(1);opacity:1;}
    50%{transform:scale(1.4);opacity:.6;}
    100%{transform:scale(1);opacity:1;}
}

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

@media (max-width:768px){

    .notificacao{
        width:290px;
        right:10px;
        left:auto;
        bottom:85px;
        border-radius:18px;
    }

    .notificacao-logo img{
        width:60px;
        height:60px;
    }

    #notificacaoTitulo{
        font-size:20px;
    }

    .notificacao-info{
        padding:14px;
        gap:8px;
    }

    .notificacao-info div{
        padding:10px;
        font-size:13px;
    }

    .btn-notificacao{
        height:48px;
        font-size:16px;
        margin:0 14px 14px;
    }
}

/*==============================
BOTÃO NO FINAL DA NOTIFICAÇÃO
==============================*/

.notificacao{
    display:flex;
    flex-direction:column;
}

.notificacao-info{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.popularidade{
    margin-bottom:12px;
}

.btn-notificacao{
    display:flex;
    justify-content:center;
    align-items:center;

    width:calc(100% - 24px);
    margin:0 12px 12px;

    height:48px;

    border-radius:12px;

    background:linear-gradient(90deg,#00c853,#00ff88);

    color:#fff;

    font-size:16px;

    font-weight:700;

    text-decoration:none;
}

/*==================================================
FIM DO STYLE.CSS
VERSÃO 2.0
MELHOR PLATAFORMAS
==================================================*/
/* Utilitário de acessibilidade: mantém o texto disponível para leitores de tela. */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

img {
    max-width: 100%;
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
.notificacao {
    width: min(310px, calc(100vw - 24px));
    padding: 14px;
    border-radius: 16px;
}

.notificacao-topo {
    margin-bottom: 10px;
}

.notificacao-plataforma {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.notificacao-logo {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.notificacao-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.notificacao-dados {
    min-width: 0;
}

.notificacao-dados h2 {
    font-size: 16px;
    margin: 0 0 3px;
}

.notificacao .avaliacao {
    font-size: 12px;
}

.notificacao-info {
    font-size: 12px;
    margin: 8px 0 12px;
}

.notificacao-info > div {
    margin: 5px 0;
}

.info-online i {
    font-size: 7px;
}

.btn-notificacao {
    min-height: 38px;
    padding: 9px 12px;
    font-size: 12px;
}

.notificacao-fechar {
    width: 28px;
    height: 28px;
}

/* Estatísticas em formato de catálogo — somente mobile */
@media (min-width:331px) and (max-width:768px){
    .estatisticas{
        width:100%;
        min-width:0;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:9px;
        margin:20px 0;
        padding-inline:12px;
    }

    .estatisticas > .estatistica{
        width:100%;
        min-width:0;
        min-height:112px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        padding:12px 6px;
        border-radius:13px;
    }

    .estatisticas > .estatistica i{
        font-size:18px;
        line-height:1;
    }

    .estatisticas > .estatistica h3{
        max-width:100%;
        margin:0;
        font-size:20px;
        line-height:1.1;
        overflow-wrap:anywhere;
    }

    .estatisticas > .estatistica span,
    .estatisticas > .estatistica p{
        max-width:100%;
        margin:0;
        font-size:11px;
        line-height:1.2;
        text-align:center;
        overflow-wrap:anywhere;
    }
}

@media (max-width:330px){
    .estatisticas{
        width:100%;
        min-width:0;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        margin:20px 0;
        padding-inline:10px;
    }

    .estatisticas > .estatistica{
        width:100%;
        min-width:0;
        min-height:108px;
        padding:12px 8px;
        border-radius:13px;
    }

    .estatisticas > .estatistica h3{
        margin:0 0 5px;
        font-size:21px;
    }

    .estatisticas > .estatistica span,
    .estatisticas > .estatistica p{
        margin:0;
        font-size:12px;
        line-height:1.2;
        text-align:center;
    }
}