/* ==================================
   ACHE E GANHE - CLUBE DOS PEQUENOS
   ================================== */


*{

margin:0;
padding:0;
box-sizing:border-box;

}



body{


min-height:100vh;


font-family:'Baloo 2', Arial, sans-serif;


background:

linear-gradient(
180deg,
#7ee8ff,
#fff3cf
);



overflow-x:hidden;



}

#confetti{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

pointer-events:none;

z-index:10000;

}



.pagina{


width:100%;


max-width:1000px;


margin:auto;


padding:20px;


text-align:center;


}







/* LOGO */


.topo{


display:flex;


justify-content:center;


margin-bottom:10px;


}



.logo{


width:380px;


max-width:80%;

}

.rodape-jogo{


    position:fixed;


    bottom:20px;


    left:0;


    width:100%;


    display:flex;


    justify-content:center;


    z-index:50;


}



.btn-voltar{


    border:none;


    background:white;


    color:#ff5790;


    font-family:'Baloo 2', Arial, sans-serif;


    font-size:22px;


    font-weight:bold;


    padding:12px 35px;


    border-radius:50px;


    cursor:pointer;


    box-shadow:

    0 8px 20px rgba(0,0,0,.18);


    transition:.3s;


}



.btn-voltar:hover{


    transform:scale(1.08);


}


@keyframes flutuarLogo{


50%{

transform:translateY(-10px);

}


}




.cabecalho p{


font-size:25px;


color:#555;


margin:5px;


}








/* PREMIO */


.premio{


display:inline-block;


margin:15px;


padding:15px 40px;


background:

linear-gradient(
45deg,
#ffb300,
#ff7b00
);



border-radius:50px;


color:white;


font-size:32px;


font-weight:bold;


box-shadow:

0 8px 0 #cc6200;



animation:

premioAnim 1.5s infinite;


}



@keyframes premioAnim{


50%{

transform:scale(1.05);

}


}








/* BOX DO JOGO */


.jogo-box{


background:white;


border-radius:40px;


padding:35px;


margin-top:20px;


box-shadow:


0 20px 45px rgba(0,0,0,.18);


}








/* STATUS */


.status{


display:flex;


justify-content:center;


gap:40px;


margin-bottom:30px;


}



.status-item{


background:#fff2b8;


padding:15px 35px;


border-radius:40px;


font-size:25px;


box-shadow:

0 5px 10px #0002;


}



.status strong{


color:#ff5790;


}








/* BALÕES */


#baloes{


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:25px;


}







.balao-box{


height:250px;


border-radius:35px;


display:flex;


align-items:center;


justify-content:center;


cursor:pointer;


box-shadow:


0 10px 20px rgba(0,0,0,.15);


transition:.3s;


overflow:hidden;


}



.balao-box:hover{


transform:

translateY(-10px)
scale(1.03);


}








.balao{


width:210px;


height:220px;


object-fit:contain;

}





@keyframes balaoFlutua{


50%{

transform:translateY(-20px);

}


}









/* ESTOURO */


.estourando{


animation:

estouro .6s forwards!important;


}



@keyframes estouro{


0%{

transform:scale(1);

}



40%{


transform:

scale(1.5)
rotate(20deg);



}



100%{


transform:scale(0);


opacity:0;


}


}







/* MASCOTE */


.mascote{


width:180px;


animation:


mascoteEntrada .8s;


}



@keyframes mascoteEntrada{


from{


transform:

scale(0)
rotate(-180deg);


opacity:0;


}



to{


transform:

scale(1)
rotate(0);


opacity:1;


}


}








/* RESULTADO */


#resultado{


margin-top:30px;


}





.ganhou{


background:

linear-gradient(
45deg,
#ff5790,
#ff9ac0
);


color:white;


padding:30px;


border-radius:35px;


font-size:35px;


animation:

aparecerResultado .8s;


}





@keyframes aparecerResultado{


from{


transform:scale(.3);


opacity:0;


}



to{


transform:scale(1);


opacity:1;


}


}


#botoesJogo{

margin-top:25px;

}



.btn-jogar,
.ganhou button{


border:none;


padding:15px 35px;


border-radius:40px;


font-size:25px;


font-weight:bold;


cursor:pointer;


background:

linear-gradient(
45deg,
#ff5790,
#ff9ac0
);


color:white;


box-shadow:

0 6px 0 #d83b70;


transition:.3s;


}



.btn-jogar:hover,
.ganhou button:hover{


transform:

scale(1.08);


}








/* TABLET */


@media(max-width:900px){


.balao-box{


height:210px;


}



.balao{


height:170px;


}


}







/* CELULAR */


@media(max-width:600px){



body{

overflow:auto;

}



.logo{


width:200px;


}






.cabecalho p{


font-size:18px;


}



.premio{


font-size:24px;


padding:12px 25px;


}



.jogo-box{


padding:20px;


}



.status{


flex-direction:column;


gap:15px;


}



#baloes{


grid-template-columns:

repeat(2,1fr);


gap:15px;


}



.balao-box{


height:160px;


}



.balao{


width:120px;


height:140px;


}


}