/* CSS base do kit. A tela de sorteio fica escopada em :where(.pagina-sorteio) (classe do nessa página),
sem mudar especificidade. O visual veio do tema apostoulevou-prod; o tema da sala carrega depois e só sobrescreve. */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Elms+Sans:ital,wght@0,100..900;1,100..900&display=swap');
/* ===== Tela de sorteio ===== */
@font-face {
font-family: "myriad";
src: url("/fonts/MYRIADPRO-BOLD.woff");
}
body:where(.pagina-sorteio){
margin: 0;
padding: 0;
font-family: "myriad";
background-size: 100%;
background-image: url("/images/background.jpg");
background-size: cover;
position: relative;
}
:where(.pagina-sorteio) .principal{
height: 100vh;
width: 100%;
display: flex;
}
:where(.pagina-sorteio) .main{
background: none !important;
padding: 0 !important;
margin: 40px 0 !important;
}
:where(.pagina-sorteio) .header{
background: none;
}
:where(.pagina-sorteio) .premiado{
width: 100%;
height: 100%;
background-size: 100%;
z-index: 999;
position: fixed;
top: 0;
right: 0%;
display: none;
z-index: 9999;
}
:where(.pagina-sorteio) .premiado.show{
display: block;
}
:where(.pagina-sorteio) .premiado .janela{
width: 80%;
height: 90%;
margin: 3% auto;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 3vw;
justify-content: center;
border: 0.2vw solid yellow;
}
:where(.pagina-sorteio) .premiado .janela .box{
width: 40%;
height: 6vw;
margin: auto;
color: yellow;
background: #07295f;
border-radius: 2vw;
text-align: center;
line-height: 6.5vw;
font-size: 4vw;
margin-top: -2vw;
margin-bottom: 2vw;
}
:where(.pagina-sorteio) .premiado .premiado-cartelas{
width: 90%;
margin: auto;
height: auto;
margin-bottom: 0.5vw;
display: flex;
flex-wrap: wrap;
}
:where(.pagina-sorteio) .premiado .premiado-cartelas .premiado-cartelas{
width: 48%;
}
:where(.pagina-sorteio) .premiado .cartela{
background: #ffd798;
width: 100%;
height: auto;
border-radius: 0.5vw;
float: left;
margin-bottom: 0.5vw;
padding: 0.2vw;
box-sizing: border-box;
margin: 1%;
z-index: 99999;
}
:where(.pagina-sorteio) .premiado .cartela .numero{
width: 19.3%;
background: #fff;
height: 3vw;
border-radius: 0.5vw;
font-size: 2.5vw;
text-align: center;
line-height: 2.7vw;
float: left;
margin: 0.1vw;
}
:where(.pagina-sorteio) .premiado .cartela .doador{
width: 100%;
font-size: 2vw;
text-align: center;
line-height: 3vw;
color: yellow;
background: #07295f;
border-radius: 0.5vw;
height: 3vw;
margin-bottom: 0.2vw;
}
:where(.pagina-sorteio) .premiado .cartela .rodape{
width: 100%;
font-size: 2vw;
line-height: 3vw;
color: yellow;
background: #07295f;
border-radius: 0.5vw;
height: 3vw;
margin-top: 0.2vw;
float: left;
}
:where(.pagina-sorteio) .premiado .cartela .cupom{
width: 40%;
float: left;
padding-left: 1vw;
}
:where(.pagina-sorteio) .premiado .cartela .valor{
width: 40%;
float: right;
padding-right: 1vw;
text-align: right;
}
:where(.pagina-sorteio) .premiado .cartela .sorteado{
background: #326195;
color: #fff;
}
:where(.pagina-sorteio) .premiado .cartela .marcar{
background: green;
color: #fff;
}
:where(.pagina-sorteio) .premiado .cartela .ultimo{
background: red;
color: #fff;
}
:where(.pagina-sorteio) .esquerda{
width: 60%;
height: 100%;
padding: 1%;
box-sizing: border-box;
}
:where(.pagina-sorteio) .coluna-direita{
width: 40%;
height: 100%;
padding: 1%;
box-sizing: border-box;
}
:where(.pagina-sorteio) .esquerda .premios{
width: 100%;
height: 7vw;
box-sizing: border-box;
display: flex;
align-content: space-between;
}
:where(.pagina-sorteio) .esquerda .acumulado{
background-size: 100%;
background-repeat: no-repeat;
position: relative;
}
:where(.pagina-sorteio) .numAcumulado{
width: auto;
height: auto;
margin: auto;
}
:where(.pagina-sorteio) .acumulado .star-acumulado{
position: absolute;
text-align: center;
width: 7vw;
height: 7vw;
top: -2.5vw;
right: -8vw;
color: #000066;
font-size: 3vw;
padding-top: 0.6vw;
background-image: url(/images/descanso-acumulado-star.png);
background-size: 100%;
background-repeat: no-repeat;
transform: rotate(15deg);
display: flex;
}
:where(.pagina-sorteio) .star{
width: 4vw;
position: absolute;
right: 0;
top: -1vw;
}
:where(.pagina-sorteio) .star img{
width: 100%;
}
:where(.pagina-sorteio) .premios .acumulado .acumulado-numero{
width: 4.3vw;
display: flex;
height: 4vw;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
position: absolute;
right: 0vw;
top: -1vw;
transform: rotate(0deg);
}
:where(.pagina-sorteio) .premios .acumulado .acumulado-numero{
transform: rotate(20deg);
}
:where(.pagina-sorteio) .modal-rodadas{
position: absolute;
top: 0;
background: #fff;
width: 90%;
height: 90%;
margin: 3% 5% 5%;
z-index: 99999;
border-radius: 1vw;
border: 2px solid #000;
display: none;
}
:where(.pagina-sorteio) .modal-rodadas .bt-fechar{
position: absolute;
top: -1.5vw;
right: -1.5vw;
width: 3vw;
height: 3vw;
color: #fff;
background: #000;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
:where(.pagina-sorteio) .esquerda .premios .acumulado-ativo{
background-image: url("/images/premio-acumulado-ativo.png");
color: #fff !important;
}
:where(.pagina-sorteio) .esquerda .premios .acumulado-desativo{
color: #5b5b5b !important;
background-image: url("/images/premio-acumulado.png");
}
:where(.pagina-sorteio) .esquerda .premios .acumulado-desativo .value{
color: #5b5b5b !important;
}
:where(.pagina-sorteio) .esquerda .premios .acumulado .value{
margin-top: 2.6vw !important;
text-align: center;
font-size: 1.5vw;
}
:where(.pagina-sorteio) .esquerda .premios .premio-ativo{
background-image: url("/images/premio-ativo.png");
background-size: 100%;
background-repeat: no-repeat;
}
:where(.pagina-sorteio) .esquerda .premios .premio-desativo{
background-image: url("/images/premio.png");
background-size: 100%;
background-repeat: no-repeat;
}
:where(.pagina-sorteio) .esquerda .premios .premio .label{
text-align: center;
font-size: 1.5vw;
margin-top: 0.2vw;
height: 2vw;
line-height: 2vw;
}
:where(.pagina-sorteio) .esquerda .premios .premio .value{
text-align: center;
color: #fff;
font-size: 1.5vw;
margin-top: 0.5vw;
}
:where(.pagina-sorteio) .esquerda .premios .premio-ativo .label{
color: #fff;
}
:where(.pagina-sorteio) .esquerda .premios .premio-desativo .label{
color: #848484;
}
:where(.pagina-sorteio) .esquerda .premios .premio-ativo .value{
color: #fff;
}
:where(.pagina-sorteio) .esquerda .premios .premio-desativo .value{
color: #5b5b5b;
}
:where(.pagina-sorteio) .esquerda .premios .premio{
width: 100%;
margin: 0.5%;
}
:where(.pagina-sorteio) .esquerda .centro{
width: 100%;
height: 26.7vw;
box-sizing: border-box;
margin-bottom: 1%;
}
:where(.pagina-sorteio) .video-sorteio,
:where(.pagina-sorteio) .video-descanso{
width: 100%;
height: 30vw;
display: block;
}
:where(.pagina-sorteio) #link_video iframe{
width: 100%;
height: 100% !important;
}
/* Keep the kit and player main videos proportional to their available width. */
:where(.pagina-sorteio) #app-kit-sorteio #link_video.video-sorteio,
:where(.pagina-sorteio) #app-kit-sorteio #link_video.video-descanso,
:where(.pagina-sorteio) #app-player #link_video.video-sorteio,
:where(.pagina-sorteio) #app-player #link_video.video-descanso{
position: relative;
height: auto;
aspect-ratio: 16 / 9;
padding: 0;
}
:where(.pagina-sorteio) #app-kit-sorteio #link_video iframe,
:where(.pagina-sorteio) #app-player #link_video iframe{
position: absolute;
inset: 0;
display: block;
border: 0;
}
:where(.pagina-sorteio) .esquerda .centro .video{
display: block;
}
:where(.pagina-sorteio) .esquerda .centro .video .video-container{
height: 30vw;
}
:where(.pagina-sorteio) .esquerda .centro .video-info{
height: 2vw;
background: #000;
display: flex;
align-items: center;
width: 100%;
position: relative;
}
:where(.pagina-sorteio) .esquerda .centro .video-info .sorteio{
color: #fff;
font-size: 1.5vw;
position: absolute;
left: 1%;
}
:where(.pagina-sorteio) .esquerda .centro .video-info .ordem{
color: #fff;
font-size: 1.5vw;
position: absolute;
right: 1%;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas{
width: 100%;
display: flex;
align-items: center;
height: 100%;
position: relative;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .bt-audio{
position: absolute;
top: 0;
right: 0;
width: 4vw;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .bt-audio img{
width: 100%;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .ordem{
position: absolute;
right: 0;
bottom: 0;
color: #fff;
font-size: 2vw;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .info{
width: 23%;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .info .box{
width: 100%;
float: left;
position: relative;
height: 6vw;
margin: 3% 0;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .info .box .label{
width: 80%;
margin: auto;
background: #07295f;
color: yellow;
border-radius: 0.5vw;
text-align: center;
position: absolute;
font-size: 1.5vw;
top: 0;
left: 10%;
z-index: 2;
height: 2.5vw;
line-height: 2.5vw;
box-shadow: 0vw 0.4vw 0.8vw rgb(0 0 0 / 50%);
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .info .box .value{
width: 100%;
height: 5vw;
padding-top: 2vw;
color: #fff;
background: #326195;
text-align: center;
position: absolute;
font-size: 2.3vw;
top: 1vw;
left: 0;
border-radius: 0.5vw;
box-sizing: border-box;
z-index: 1;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .bolas{
width: 70%;
position: relative;
height: 100%;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .bolas img{
width: 100%;
height: auto;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .bolas .bola-1{
position: absolute;
top: 0%;
left: 20%;
width: 18vw;
height: 18vw;
border: 0.1vw #fff solid;
border-radius: 100%;
padding: 0.3%;
display: flex;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .bolas .bola-2{
position: absolute;
top: 10%;
left: 70%;
width: 10vw;
height: 10vw;
border: 0.1vw #fff solid;
border-radius: 100%;
padding: 0.3%;
display: flex;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .bolas .bola-3{
position: absolute;
top: 50%;
left: 70%;
width: 8vw;
height: 8vw;
border: 0.1vw #fff solid;
border-radius: 100%;
padding: 0.3%;
display: flex;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .bolas .bola-4{
position: absolute;
top: 70%;
left: 54%;
width: 7vw;
height: 7vw;
border: 0.1vw #fff solid;
border-radius: 100%;
padding: 0.3%;
display: flex;
}
:where(.pagina-sorteio) .esquerda .painel-numeros{
width: 100%;
height: 8vw;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
padding: 1%;
box-sizing: border-box;
border-radius: 0.3vw;
background-color: rgba(255, 255, 255, 0.2);
margin-bottom: 0;
}
:where(.pagina-sorteio) .esquerda .painel-numeros .numero{
width: 3.04%;
margin: 0.08vw;
color: #333;
background: #000;
box-sizing: border-box;
font-size: 1vw;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-family: "myriad";
border-radius: 0.5vw;
}
:where(.pagina-sorteio) .esquerda .painel-numeros .sorteado{
background: green;
color: #fff;
}
:where(.pagina-sorteio) .esquerda .painel-numeros .ultimo{
background: red;
color: #fff;
}
/* 75 bolas: 25 por linha (3 linhas cheias) no computador; no celular os 15 por linha já fecham certo. */
@media (orientation: landscape) and (min-width: 1025px) {
:where(.pagina-sorteio) .esquerda .painel-numeros.bolas-75{ justify-content: space-between; }
:where(.pagina-sorteio) .esquerda .painel-numeros.bolas-75 .numero{ width: calc(4% - 0.2vw); }
}
:where(.pagina-sorteio) .espera{
float: left;
width: 100%;
height: auto;
text-align: center;
display: block;
}
:where(.pagina-sorteio) .espera .relogio{
width: 100%;
height: 13vw;
display: flex;
padding: 2%;
box-sizing: border-box;
justify-content: space-between;
background: #07295f;
margin-bottom: 1vw;
}
@media (max-height: 660px) {
:where(.pagina-sorteio) .espera .relogio{
height: 12vw;
padding: 1%;
}
}
:where(.pagina-sorteio) .espera .relogio .numero{
width: 20%;
font-size: 8vw;
text-align: center;
border: solid 0.3vw #fff;
color: yellow;
line-height: 10vw;
border-radius: 1vw;
}
:where(.pagina-sorteio) .espera .relogio .doispontos{
width: 10%;
font-size: 8vw;
text-align: center;
color: yellow;
line-height: 8vw;
}
/**
STYLE COMPRAR
**/
:where(.pagina-sorteio) #comprar{
margin-bottom: 0.5vw;
width: 100%;
height: 6vw;
background: #fff;
border-radius: 0.5vw;
overflow: hidden;
padding: 0.5vw;
box-sizing: border-box;
}
:where(.pagina-sorteio) #comprar .div-esq{
width: 60%;
float: left;
}
:where(.pagina-sorteio) #comprar .div-100{
width: 100%;
float: left;
height: 2.8vw;
box-sizing: border-box;
}
:where(.pagina-sorteio) #comprar .div-100r{
width: 97%;
background: #fff;
float: left;
height: 3vw;
box-sizing: border-box;
overflow: hidden;
border-radius: 1vw;
}
:where(.pagina-sorteio) #comprar .div-dir{
width: 40%;
float: right;
height: 100%;
}
:where(.pagina-sorteio) #comprar .qtd-bt{
width: 2.3vw;
height: 2.3vw;
line-height: 2.2vw;
background: yellow;
border-radius: 5vw;
color: #333;
margin: 0.5% 0.7%;
float: left;
text-align: center;
font-family: myriad;
border: 0.15vw solid #08234e;
box-sizing: border-box;
cursor: pointer;
font-size: 1vw;
text-align: center;
}
:where(.pagina-sorteio) #comprar .quadro-qtd{
background: #fff;
height: 2vw;
padding: 0.1vw;
box-sizing: border-box;
float: left;
width: 58%;
font-size: 1.5vw;
}
:where(.pagina-sorteio) #comprar .bt-menos-mais{
width: 30%;
height: 2vw;
background: #08234e;
color: yellow;
float: left;
text-align: center;
line-height: 2vw;
cursor: pointer;
font-family: myriad;
}
:where(.pagina-sorteio) #comprar .menos-mais-direita{
border-radius: 0 1vw 1vw 0;
}
:where(.pagina-sorteio) #comprar .menos-mais-esquerda{
border-radius: 1vw 0 0 1vw;
}
:where(.pagina-sorteio) #comprar .input-qtd{
width: 40%;
float: left;
height: 4%;
padding: 0;
margin: 0;
}
:where(.pagina-sorteio) #comprar .input-qtd input{
border: 0.1vw solid #08234e;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
box-sizing: border-box;
height: 2vw;
font-size: 1.5vw;
font-family: myriad;
background: #fff;
}
:where(.pagina-sorteio) #comprar .input-valor{
width: 40%;
float: right;
height: 100%;
box-sizing: border-box;
border: 0;
padding: 0;
margin: 0;
padding: 0.1vw;
position: relative;
}
:where(.pagina-sorteio) #comprar .input-valor input{
border: 0;
padding: 0;
margin: 0;
width: 95%;
text-align: center;
height: 100%;
font-size: 1.5vw;
background: #fff;
border: 0.1vw solid #333;
font-family: myriad;
height: 2vw;
box-sizing: border-box;
border-radius: 1vw;
position: absolute;
}
:where(.pagina-sorteio) #comprar .bt-comprar{
width: 100%;
border: 0;
height: 5vw;
box-sizing: border-box;
background: green;
color: #fff;
font-size: 2vw;
cursor: pointer;
font-family: myriad;
border-radius: 1vw;
}
:where(.pagina-sorteio) .cartelas-compradas{
font-size: 1.5vw;
width: 100%;
height: 3vw;
float: left;
background-image: radial-gradient(#fff, #08234e);
text-align: center;
line-height: 3vw;
border-radius: 0.5vw;
margin-bottom: 0.45vw;
position: relative;
}
:where(.pagina-sorteio) .cartelas-compradas span{
color: red;
}
:where(.pagina-sorteio) .zoom-menos{
cursor: pointer;
margin-right: 2vw;
}
:where(.pagina-sorteio) .zoom-mais{
cursor: pointer;
}
:where(.pagina-sorteio) .cartelas-compradas .bt-zoom{
position: absolute;
top: 0;
right: 3%;
height: 3vw;
align-items: center;
display: flex;
}
:where(.pagina-sorteio) .cartelas-compradas .bt-zoom img{
width: 1.4vw;
margin: 0 0.2vw;
}
:where(.pagina-sorteio) .compradas-nome{
color: #133365;
}
:where(.pagina-sorteio) .compradas-valor{
color: red;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-1 .cartela .doador{
height: 6vw;
font-size: 5vw;
line-height: 6vw;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-1 .cartela .numero{
width: 19%;
height: 8vw;
font-size: 6vw;
line-height: 8vw;
border-radius: 1vw;
margin: 0.5%;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-1{
height: auto;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-1 .cartela{
height: auto;
margin: 1vw 0;
width: 100%;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-1 .cartela .cupom{
height: 6vw;
font-size: 5vw;
line-height: 6vw;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-2 .cartela .doador{
height: 5vw;
font-size: 2.5vw;
line-height: 5vw;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-2 .cartela .numero{
width: 19%;
height: 4vw;
font-size: 3vw;
line-height: 4vw;
border-radius: 1vw;
margin: 0.5%;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-2{
height: auto;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-2 .cartela{
height: auto;
margin: 1vw 0;
width: 32%;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-2 .cartela .cupom{
height: 5vw;
font-size: 2.5vw;
line-height: 5vw;
}
/**
FIM COMPRA
**/
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .topo .button{
position: absolute;
right: 1vw;
height: 2vw;
line-height: 1.6vw;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas{
width: 100%;
height: 21.4vw;
margin-bottom: 0.2vw;
background: #326195;
font-size: 1.2vw;
border-radius: 0.5vw;
overflow: hidden;
position: relative;
margin-top: 0.2vw;
transition: height 0.5s;
top: -3vw;
margin-bottom: -2.4vw;
overflow: auto;
}
/* Altura em vw: a .principal do tema tem height: auto, então um % aqui virava auto e a lista crescia em vez de minimizar. */
:where(.pagina-sorteio) .coluna-direita.hide-lista .lista-melhores-cartelas{
height: 2vw !important;
}
:where(.pagina-sorteio) .coluna-direita.hide-lista .lista-melhores-cartelas .topo{
height: 2vw !important;
line-height: 2vw;
}
:where(.pagina-sorteio) .coluna-direita.hide-lista .bilhete-melhores-cartelas{
height: 88%;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .topo{
background: #07295f;
display: flex;
height: 1.5vw;
line-height: 1.2vw;
color: yellow;
position: relative;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .topo .cupom{
text-align: center;
padding-top: 0.2vw;
width: 20%;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .topo .doador{
text-align: center;
padding-top: 0.2vw;
width: 55%;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .topo .faltam{
text-align: center;
padding-top: 0.2vw;
width: 40%;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .linha{
display: flex;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .corpo .bg-branco{
background: #fff;
border-radius: 0.5vw;
height: 2vw;
line-height: 2.2vw;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .corpo .cupom{
text-align: center;
padding: 0.1vw;
width: 20%;
color: red;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .corpo .doador{
text-align: center;
padding: 0.1vw;
width: 55%;
color: #07295f;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .corpo .faltam{
padding: 0.1vw;
width: 40%;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .corpo .faltam span{
width: 18.3%;
float: left;
background: #07295f;
color: yellow;
border-radius: 0.5vw;
margin: 0.1vw;
height: 1.8vw;
text-align: center;
line-height: 1.8vw;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .corpo .faltam .nulo{
background: #d3d3d3;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas{
width: 100%;
height: 31.9vw;
overflow: auto;
margin-bottom: 0.5vw;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-radius: 0.3vw;
background-color: rgba(255, 255, 255, 0.2);
padding: 1vw;
box-sizing: border-box;
align-content: flex-start;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela{
background: #ffd798;
width: 49%;
height: 11.2vw;
border-radius: 0.5vw;
margin-bottom: 0.3vw;
padding: 0.2vw;
box-sizing: border-box;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela-25{
height: 14.2vw !important;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas div:nth-child(odd){
float: left;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela .numero{
width: 18.7%;
background: #fff;
height: 2.2vw;
border-radius: 0.5vw;
font-size: 1.6vw;
text-align: center;
line-height: 2.3vw;
float: left;
margin: 0.1vw;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela .ultimo{
background: red !important;
color: #fff;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela .falta{
background: yellow !important;
color: #000;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela .doador{
width: 100%;
font-size: 1.5vw;
text-align: center;
line-height: 1.5vw;
color: yellow;
background: #07295f;
border-radius: 0.5vw;
height: 1.6vw;
margin-bottom: 0.2vw;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela .cupom{
width: 100%;
font-size: 1.5vw;
text-align: center;
line-height: 1.5vw;
color: yellow;
background: #07295f;
border-radius: 0.5vw;
height: 1.6vw;
margin-top: 0.2vw;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-1 .cartela{
background: #ffd798;
width: 100%;
height: auto;
border-radius: 0.5vw;
margin-bottom: 0.3vw;
padding: 0.2vw;
box-sizing: border-box;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-1 div:nth-child(odd){
float: left;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-1 .cartela .numero{
width: 18.7%;
background: #fff;
height: 2.2vw;
border-radius: 0.5vw;
font-size: 1.6vw;
text-align: center;
line-height: 2.3vw;
float: left;
margin: 0.22vw;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-1 .cartela .doador{
width: 100%;
font-size: 2vw;
text-align: center;
line-height: 2vw;
color: yellow;
background: #07295f;
border-radius: 0.5vw;
height: 2vw;
margin-bottom: 0.2vw;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-1 .cartela .cupom{
width: 100%;
font-size: 2vw;
text-align: center;
line-height: 2vw;
color: yellow;
background: #07295f;
border-radius: 0.5vw;
height: 2vw;
margin-top: 0.2vw;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-2 .cartela{
background: #ffd798;
width: 32%;
height: auto;
border-radius: 0.5vw;
margin-bottom: 0.3vw;
padding: 0.2vw;
box-sizing: border-box;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-2 div:nth-child(odd){
float: left;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-2 .cartela .numero{
width: 18%;
background: #fff;
height: 1.6vw;
border-radius: 0.5vw;
font-size: 1.2vw;
text-align: center;
line-height: 1.6vw;
float: left;
margin: 0.1vw;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-2 .cartela .doador{
width: 100%;
font-size: 1vw;
text-align: center;
line-height: 2vw;
color: yellow;
background: #07295f;
border-radius: 0.5vw;
height: 2vw;
margin-bottom: 0.2vw;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-2 .cartela .cupom{
width: 100%;
font-size: 1vw;
text-align: center;
line-height: 2vw;
color: yellow;
background: #07295f;
border-radius: 0.5vw;
height: 2vw;
margin-top: 0.2vw;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela .sorteado{
background: #326195;
color: #fff;
}
:where(.pagina-sorteio) .compra-aberta .lista-melhores-cartelas{
display: none;
}
:where(.pagina-sorteio) .compra-fechada .lista-melhores-cartelas{
display: block;
}
:where(.pagina-sorteio) .compra-fechada .bilhete-melhores-cartelas{
display: flex;
height: 19.7vw;
}
:where(.pagina-sorteio) .compra-fechada #comprar{
display: none;
}
:where(.pagina-sorteio) .ganhadores-final{
width: 100%;
margin: 0;
height: 100vh;
display: none;
position: fixed;
background-color: rgba(0, 0, 0, 0.7);
z-index: 99999;
top: 0;
}
:where(.pagina-sorteio) .ganhadores-final.show{
display: flex;
}
:where(.pagina-sorteio) .ganhadores-final .box{
height: 42vw;
width: 25%;
margin: 0.8%;
margin-top: 3vw;
}
:where(.pagina-sorteio) .ganhadores-final .box .ganhadores{
width: 60%;
margin: 15% 20%;
}
:where(.pagina-sorteio) .ganhadores-final .box .logo-doou{
width: 70%;
margin: 5% 15%;
}
:where(.pagina-sorteio) .ganhadores-final .box-amarelo{
background: yellow;
border-radius: 1.5vw;
margin-top: 3.5vw;
position: relative;
display: flex;
justify-content: center;
padding-top: 2vw;
flex-wrap: wrap;
align-content: flex-start;
}
:where(.pagina-sorteio) .ganhadores-final .box-amarelo .premio{
position: absolute;
top: -2vw;
width: 60%;
}
:where(.pagina-sorteio) .ganhadores-final .box-amarelo .box-ganhador{
width: 100%;
background-image: url("/images/bg-premio-final.png");
background-size: 80%;
background-repeat: no-repeat;
background-position-x: center;
height: 11vw;
margin-top: 1vw;
}
:where(.pagina-sorteio) .ganhadores-final .box-amarelo .box-ganhador span{
width: 100%;
display: block;
text-align: center;
}
:where(.pagina-sorteio) .ganhadores-final .box-amarelo .box-ganhador .codigo{
font-size: 2.4vw;
color: yellow;
height: 3vw;
line-height: 2.7vw;
}
:where(.pagina-sorteio) .ganhadores-final .box-amarelo .box-ganhador .nome{
font-size: 1.5vw;
line-height: 2.5vw;
color: #fff;
height: 2.5vw;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 65%;
margin: auto;
}
:where(.pagina-sorteio) .ganhadores-final .box-amarelo .box-ganhador .valor{
font-size: 2.2vw;
color: yellow;
line-height: 2vw;
}
:where(.pagina-sorteio) .cartelas-mobile{
display: none;
}
:where(.pagina-sorteio) .proximos .topo{
display: flex;
justify-content: space-between;
}
:where(.pagina-sorteio) .proximos .linha{
display: flex;
justify-content: space-between;
}
:where(.pagina-sorteio) .proximos .linha:first-child{
display: flex;
justify-content: space-between;
background: #fff;
border-radius: 0.5vw;
padding: 0.5vw 0;
}
:where(.pagina-sorteio) .proximos .acumulado{
background: red !important;
color: yellow;
}
:where(.pagina-sorteio) .proximos .box{
position: relative;
margin: 0;
background-repeat: no-repeat;
background-size: 100%;
}
:where(.pagina-sorteio) .proximos .info{
position: relative;
width: 33.3%;
background-size: 80%;
background-position-x: center;
height: 5vw;
}
:where(.pagina-sorteio) .proximos .info:nth-child(2):before{
content: "";
position: absolute;
border-right: 1px solid #000066;
border-left: 1px solid #000066;
height: 70%;
margin-top: 5%;
left: 0%;
width: 100%;
}
:where(.pagina-sorteio) .proximos .linha{
display: flex;
flex-wrap: wrap;
}
:where(.pagina-sorteio) .proximos .linha:nth-child(2){
border-radius: 0.5vw;
color: yellow;
}
:where(.pagina-sorteio) .proximos .premio{
width: 100%;
height: 4vw;
display: flex;
justify-content: space-between;
background: #000066;
border-radius: 0.5vw;
margin-top: 0.5vw;
padding: 1vw;
align-items: center;
height: 7vw;
}
:where(.pagina-sorteio) .proximos .com-acumulado{
height: 5vw;
}
:where(.pagina-sorteio) .proximos .info .label{
color: #000066;
font-size: 1.6vw;
line-height: 2vw;
}
:where(.pagina-sorteio) .proximos .info .value{
color: #000066;
font-size: 2vw;
line-height: 2.3vw;
}
:where(.pagina-sorteio) .proximos .info:nth-child(1) .value{
color: red;
font-size: 2.5vw;
}
:where(.pagina-sorteio) .proximos .info:nth-child(2) .value{
font-size: 2.5vw;
}
:where(.pagina-sorteio) .proximos .premio .label{
font-size: 3vw;
max-width: 50%;
width: auto;
text-align: left;
position: relative;
}
:where(.pagina-sorteio) .proximos .premio .label::before{
content: "";
position: absolute;
right: -4vw;
top: -1vw;
height: 4vw;
width: 4vw;
background-size: 100%;
background-repeat: no-repeat;
transform: rotate(15deg);
}
:where(.pagina-sorteio) .proximos .premio:nth-child(1) .label::before{
background-image: url("/images/trofeu-bronze.svg");
}
:where(.pagina-sorteio) .proximos .premio:nth-child(2) .label::before{
background-image: url("/images/trofeu-prata.svg");
}
:where(.pagina-sorteio) .proximos .premio:nth-child(3) .label::before{
background-image: url("/images/trofeu-ouro.svg");
}
/* Prêmio da roleta (type roleta, em qualquer posição): miniroleta girando no lugar do troféu. */
:where(.pagina-sorteio) .proximos .premio.premio-roleta .label::before{
background-image: url("/images/mini-roleta.svg");
background-size: 80%;
background-position: center;
animation: mini-roleta-gira 8s linear infinite;
}
@keyframes mini-roleta-gira {
to { transform: rotate(375deg); }
}
@media (prefers-reduced-motion: reduce) {
:where(.pagina-sorteio) .proximos .premio.premio-roleta .label::before{ animation: none; }
}
:where(.pagina-sorteio) .proximos .premio .value{
font-size: 3vw;
width: 50%;
text-align: right;
}
@media (orientation: portrait),
(max-width: 1024px) {
body:where(.pagina-sorteio){
align-items: start;
overflow: auto;
height: 100vh;
background-size: auto 100%;
background-attachment: fixed;
position: relative;
}
:where(.pagina-sorteio) .main{
background: none !important;
padding: 0 !important;
margin: 60px 0 !important;
}
:where(.pagina-sorteio) .principal{
height: auto;
width: 100%;
flex-wrap: wrap;
}
:where(.pagina-sorteio) .esquerda{
width: 100%;
}
:where(.pagina-sorteio) .espera{
width: 100%;
background-image: url(/images/descanso-box-proximos.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
background-position-y: center;
height: 110vw;
}
:where(.pagina-sorteio) .espera-total{
background-image: url(/images/descanso-box-proximos-2.png) !important;
height: 76vw !important;
}
:where(.pagina-sorteio) .espera-total .proximos .premio:nth-child(1) .label::before{
background-image: url("/images/trofeu-ouro.svg") !important;
}
:where(.pagina-sorteio) .espera-total .proximos .premio{
flex-wrap: wrap;
background: none;
}
:where(.pagina-sorteio) .espera-total .proximos .premio .label{
max-width: 100%;
width: auto;
margin: auto;
height: 10vw;
line-height: 12vw;
border-radius: 1.5vw;
padding-left: 4vw;
padding-right: 15vw;
}
:where(.pagina-sorteio) .espera-total .proximos .premio .value{
max-width: 100%;
width: 100%;
margin: auto;
height: 13vw;
line-height: 12vw;
border-radius: 1.5vw;
background: #000066;
margin-top: 0.5vw;
text-align: center;
font-size: 10vw;
}
:where(.pagina-sorteio) .espera-total .proximos .premio .label::before{
right: 5vw !important;
top: 3vw !important;
}
:where(.pagina-sorteio) .coluna-direita{
width: 100%;
}
:where(.pagina-sorteio) .esquerda .premios{
height: 12vw;
}
:where(.pagina-sorteio) .esquerda .premios .premio .label{
font-size: 2.4vw;
}
:where(.pagina-sorteio) .esquerda .premios .premio .value{
font-size: 2.5vw;
/* margin-top: 2vw; */
}
/* .esquerda .premios .acumulado .value {
margin-top: 4vw !important;
} */
:where(.pagina-sorteio) .espera{
padding-top: 8vw;
}
:where(.pagina-sorteio) .espera .relogio{
height: 25vw;
width: 88%;
margin: auto;
background: none;
}
:where(.pagina-sorteio) .espera .relogio .numero{
font-size: 18vw;
line-height: 20vw;
}
:where(.pagina-sorteio) .espera .relogio .doispontos{
font-size: 16vw;
line-height: 18vw;
}
:where(.pagina-sorteio) .espera .proximos .topo .box{
height: 5vw;
line-height: 5vw;
font-size: 3.5vw;
}
:where(.pagina-sorteio) .espera .proximos .menor{
font-size: 3vw !important;
}
:where(.pagina-sorteio) .esquerda .painel-numeros{
height: auto;
justify-content: space-between;
margin-bottom: 2vw;
}
:where(.pagina-sorteio) .esquerda .painel-numeros .numero{
font-size: 3vw;
height: 4vw;
width: 6.4%;
border-radius: 1vw;
}
:where(.pagina-sorteio) #comprar{
height: 20.5vw;
margin-bottom: 1vw;
padding: 1vw;
border-radius: 1.5vw;
}
:where(.pagina-sorteio) #comprar .bt-comprar{
height: 14vw;
font-size: 4vw;
}
:where(.pagina-sorteio) #comprar .qtd-bt{
width: 11.5%;
height: 9vw;
line-height: 9vw;
border-radius: 2vw;
font-size: 4vw;
font-weight: 600;
margin: 0;
}
:where(.pagina-sorteio) #comprar .div-100{
height: 10vw;
display: flex;
justify-content: space-between;
}
:where(.pagina-sorteio) #comprar .div-100r{
height: 9vw;
width: 60%;
}
:where(.pagina-sorteio) #comprar .bt-menos-mais{
height: 8vw;
font-size: 5vw;
line-height: 8vw;
}
:where(.pagina-sorteio) #comprar .input-qtd input{
height: 8vw;
font-size: 4vw;
}
:where(.pagina-sorteio) #comprar .input-valor input{
height: 8vw;
font-size: 4vw;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .topo{
height: 6vw;
font-size: 3vw;
padding-top: 1vw;
line-height: 3.4vw;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas{
font-size: 2vw;
font-size: 4vw;
height: auto;
margin-bottom: 1vw;
transition: height 0.5s !important;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .linha{
height: 5.5vw !important;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .corpo .bg-branco{
height: 5vw !important;
line-height: 5vw !important;
border-radius: 1vw;
padding: 0.3vw;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .corpo .faltam span{
height: 100%;
line-height: 100% !important;
width: 19.3%;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela .doador{
height: 5vw;
font-size: 4vw;
line-height: 5.4vw;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela .numero{
width: 19%;
height: 5vw;
font-size: 4vw;
line-height: 5.4vw;
border-radius: 1vw;
margin: 0.5%;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas{
height: auto;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela{
height: auto;
margin: 1vw 0;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela .cupom{
height: 4vw;
font-size: 3vw;
line-height: 4.4vw;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-1 .cartela .doador{
height: 6vw;
font-size: 5vw;
line-height: 6vw;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-1 .cartela .numero{
width: 19%;
height: 8vw;
font-size: 6vw;
line-height: 8vw;
border-radius: 1vw;
margin: 0.5%;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-1{
height: auto;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-1 .cartela{
height: auto;
margin: 1vw 0;
width: 100%;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-1 .cartela .cupom{
height: 6vw;
font-size: 5vw;
line-height: 6vw;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-2 .cartela .doador{
height: 5vw;
font-size: 2.5vw;
line-height: 5vw;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-2 .cartela .numero{
width: 19%;
height: 4vw;
font-size: 3vw;
line-height: 4vw;
border-radius: 1vw;
margin: 0.5%;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-2{
height: auto;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-2 .cartela{
height: auto;
margin: 1vw 0;
width: 32%;
}
:where(.pagina-sorteio) .coluna-direita .zoom-cartela-2 .cartela .cupom{
height: 5vw;
font-size: 2.5vw;
line-height: 5vw;
}
:where(.pagina-sorteio) .cartelas-compradas{
height: 8vw;
font-size: 4vw;
line-height: 8vw;
}
:where(.pagina-sorteio) .esquerda .centro{
height: auto;
}
:where(.pagina-sorteio) .esquerda .espaco-video{
height: 235px;
}
:where(.pagina-sorteio) .esquerda .centro .video .video-container{
height: 50vw;
}
:where(.pagina-sorteio) .esquerda .centro .video-info{
height: 4vw;
}
:where(.pagina-sorteio) .esquerda .centro .video-info .sorteio{
font-size: 3vw;
}
:where(.pagina-sorteio) .esquerda .centro .video-info .ordem{
font-size: 3vw;
}
:where(.pagina-sorteio) .esquerda .centro .fixo{
position: fixed;
width: 100%;
top: 0;
z-index: 9;
}
:where(.pagina-sorteio) .cartelas-compradas .bt-zoom{
display: flex;
height: 100%;
}
:where(.pagina-sorteio) .cartelas-compradas .bt-zoom img{
width: 4vw;
margin: 0 0.5vw;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .bolas{
height: 42vw;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .info .box{
height: 8vw;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .info .box .label{
height: 4vw;
line-height: 4vw;
font-size: 3vw;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .info .box .value{
height: 8vw;
font-size: 3.5vw;
line-height: 7vw;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .bolas .bola-1{
top: 0;
left: 5%;
width: 40vw;
height: 40vw;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .bolas .bola-2{
top: 0;
left: 66%;
width: 16vw;
height: 16vw;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .bolas .bola-3{
top: 45%;
left: 68%;
width: 12vw;
height: 12vw;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .bolas .bola-4{
top: 75%;
left: 60%;
width: 10vw;
height: 10vw;
}
:where(.pagina-sorteio) .star{
width: 7vw;
position: absolute;
right: 0vw;
top: -2vw;
}
:where(.pagina-sorteio) .star img{
width: 100%;
}
:where(.pagina-sorteio) .acumulado .star-acumulado{
position: absolute;
text-align: center;
width: 12vw;
height: 12vw;
top: -4vw;
right: -12vw;
color: #000066;
font-size: 5vw;
padding-top: 1.7vw;
background-image: url(/images/descanso-acumulado-star.png);
background-size: 100%;
background-repeat: no-repeat;
transform: rotate(15deg);
display: flex;
}
:where(.pagina-sorteio) .premios .acumulado .acumulado-numero{
width: 7.5vw;
display: flex;
height: 7vw;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
position: absolute;
right: 0vw;
top: -2vw;
transform: rotate(0deg);
}
:where(.pagina-sorteio) .premios .acumulado .acumulado-numero span{
transform: rotate(20deg);
font-size: 2vw;
}
:where(.pagina-sorteio) .premiado .premiado-cartelas .premiado-cartelas{
width: 100%;
}
:where(.pagina-sorteio) .premiado .cartela .doador{
height: 5vw;
font-size: 3.5vw;
line-height: 4.5vw;
}
:where(.pagina-sorteio) .premiado .cartela .rodape{
height: 5vw;
font-size: 3.5vw;
line-height: 4.5vw;
}
:where(.pagina-sorteio) .premiado .cartela .numero{
height: 5vw;
font-size: 3.5vw;
line-height: 5vw;
}
:where(.pagina-sorteio) .ganhadores-final{
flex-wrap: wrap;
position: fixed;
top: 0;
overflow: auto;
}
:where(.pagina-sorteio) .ganhadores-final::before{
content: "GANHADORES";
position: absolute;
top: 2vw;
width: 100%;
text-align: center;
color: #fff;
font-size: 8vw;
}
:where(.pagina-sorteio) .ganhadores-final .ganhadores{
display: none;
}
:where(.pagina-sorteio) .ganhadores-final .logo-doou{
display: none;
}
:where(.pagina-sorteio) .ganhadores-final .box-amarelo{
width: 100%;
padding-top: 10vw;
}
:where(.pagina-sorteio) .ganhadores-final .box{
height: auto;
}
:where(.pagina-sorteio) .ganhadores-final .box-amarelo .premio{
width: 30%;
margin-top: 2vw;
}
:where(.pagina-sorteio) .ganhadores-final .box-amarelo .box-ganhador{
width: 50%;
height: 20vw;
}
:where(.pagina-sorteio) .ganhadores-final .box-amarelo .box-ganhador .codigo{
font-size: 4vw;
line-height: 6vw;
height: 6vw;
margin-bottom: 0.5vw;
}
:where(.pagina-sorteio) .ganhadores-final .box-amarelo .box-ganhador .nome{
font-size: 4vw;
line-height: 5vw;
height: 5vw;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 65%;
margin: auto;
}
:where(.pagina-sorteio) .ganhadores-final .box-amarelo .box-ganhador .valor{
font-size: 4vw;
line-height: 5vw;
height: 5vw;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .ordem{
font-size: 4vw;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .bt-audio{
width: 8vw;
right: 2vw;
}
:where(.pagina-sorteio) .zoom-menos{
cursor: pointer;
margin-right: 6vw;
}
:where(.pagina-sorteio) .coluna-direita.hide-lista .lista-melhores-cartelas .topo{
height: 4vw !important;
line-height: 2vw;
}
:where(.pagina-sorteio) .coluna-direita.hide-lista .lista-melhores-cartelas{
height: 4vw !important;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .topo .button{
right: 3vw;
height: 5vw;
line-height: 2vw;
}
:where(.pagina-sorteio) #comprar .div-esq{
width: 100%;
}
:where(.pagina-sorteio) #comprar .div-dir{
width: 0;
position: relative;
}
:where(.pagina-sorteio) #comprar .div-dir button{
position: absolute;
top: 10.1vw;
right: 0;
width: 38vw;
height: 8vw;
line-height: 6vw;
}
:where(.pagina-sorteio) .proximos{
width: 85%;
margin: auto;
}
:where(.pagina-sorteio) .proximos .info .label{
font-size: 4vw;
line-height: 5vw;
height: auto;
}
:where(.pagina-sorteio) .proximos .info .value{
font-size: 4vw;
line-height: 5vw;
}
:where(.pagina-sorteio) .proximos .info:nth-child(1) .value{
font-size: 4vw;
line-height: 4vw;
}
:where(.pagina-sorteio) .proximos .info:nth-child(2) .value{
font-size: 4vw;
line-height: 4vw;
}
:where(.pagina-sorteio) .proximos .info{
height: auto;
}
:where(.pagina-sorteio) .proximos .info .value{
font-size: 3vw;
}
:where(.pagina-sorteio) .proximos .premio{
height: 13vw;
border-radius: 1.5vw;
padding: 0 3vw;
}
:where(.pagina-sorteio) .proximos .com-acumulado{
height: 10vw;
}
:where(.pagina-sorteio) .proximos .acumulado{
background: red;
color: yellow;
}
:where(.pagina-sorteio) .numAcumulado{
width: auto;
height: auto;
margin: auto;
}
:where(.pagina-sorteio) .proximos .acumulado .label,
:where(.pagina-sorteio) .proximos .acumulado .value{
font-size: 5vw !important;
}
:where(.pagina-sorteio) .proximos .premio .label,
:where(.pagina-sorteio) .proximos .premio .value{
font-size: 6vw;
}
:where(.pagina-sorteio) .proximos .premio .label::before{
height: 7vw;
width: 7vw;
right: -7vw;
}
:where(.pagina-sorteio) .proximos .linha:first-child{
border-radius: 1.5vw;
}
:where(.pagina-sorteio) .video-sorteio{
padding: 1px;
width: 100%;
height: 83vw;
}
:where(.pagina-sorteio) .video-descanso{
padding: 1px;
width: 100%;
height: 83vw;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela-25{
height: 33vw !important;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas.zoom-cartela-2 .cartela-25{
height: 28.2vw !important;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas.zoom-cartela-1 .cartela-25{
height: 49vw !important;
}
}
:where(.pagina-sorteio) .premios.oculto{
display: none !important;
}
:where(.pagina-sorteio) .hide{
display: none;
}
:where(.pagina-sorteio) h1.premio-title{
font-size: 3rem;
font-weight: bold;
font-family: myriad;
text-transform: uppercase;
background: linear-gradient(0deg, #b8670b, #ffd700);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transform: rotate(-5deg);
-webkit-text-stroke: 2px #000;
}
:where(.pagina-sorteio) #modal-result-partida h6,
:where(.pagina-sorteio) .modal-result-partida .h6{
font-size: 1.5rem;
}
/* Compact video floats on desktop and remains in the page flow on mobile.
The frame (.moldura-compacta) is the floating box; the video sits inside it. */
:where(.pagina-sorteio) .video-moldura.moldura-compacta{
position: fixed;
right: 16px;
bottom: 16px;
z-index: 1000;
width: min(320px, calc(100vw - 32px));
box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
border-radius: 6px;
overflow: hidden;
background: #000;
}
:where(.pagina-sorteio) #link_video.video-compacto:not(.hide){
display: block;
position: relative;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
margin: 0;
padding: 0;
background: #000;
}
:where(.pagina-sorteio) #link_video.video-compacto iframe{
position: absolute;
inset: 0;
}
@media (orientation: portrait), (max-width: 1024px) {
:where(.pagina-sorteio) .video-moldura.moldura-compacta{
position: relative;
right: auto;
bottom: auto;
z-index: auto;
width: 100%;
margin: 0 0 12px;
box-shadow: none;
}
}
/* Bar of the compact video frame with a per-viewer minimize toggle. */
:where(.pagina-sorteio) .video-moldura-barra{
display: flex;
align-items: center;
justify-content: space-between;
background: #111;
color: #fff;
padding: 4px 10px;
font-size: 12px;
font-weight: bold;
letter-spacing: .05em;
}
:where(.pagina-sorteio) .video-moldura-botao{
background: transparent;
border: 0;
color: #fff;
padding: 0;
line-height: 1;
cursor: pointer;
}
:where(.pagina-sorteio) .video-moldura-botao .material-icons{
font-size: 20px;
vertical-align: middle;
}
/* Minimized keeps the iframe alive, so the stream does not reload on restore. */
:where(.pagina-sorteio) .video-moldura.video-minimizado #link_video.video-compacto{
height: 0;
aspect-ratio: auto;
overflow: hidden;
}
/* The 3D machine fills the draw area; the existing ball remains the WebGL fallback. */
:where(.pagina-sorteio) .bolas-pipoqueira .pipoqueira{
position: absolute;
left: -5%;
top: 0;
width: 89%;
height: 100%;
opacity: 0;
pointer-events: none;
}
:where(.pagina-sorteio) .bolas-pipoqueira .pipoqueira-webgl{ opacity: 1; }
:where(.pagina-sorteio) .pipoqueira canvas{ display: block; width: 100%; height: 100%; }
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .pipoqueira-3d .bola-1{
opacity: 0;
pointer-events: none;
}
:where(.pagina-sorteio) .esquerda.sorteio-com-pipoqueira .premios .premio-ativo{
border: max(.3vw, 4px) solid var(--sixteenth-color, #ffd54a);
box-shadow: 0 0 5px cyan, 0 0 10px cyan, 0 0 20px cyan, 0 0 20px cyan, 0 0 20px cyan;
}
:where(.pagina-sorteio) .esquerda.sorteio-com-pipoqueira .premios .premio-ativo:not(.acumulado){
position: relative;
z-index: 1;
}
:where(.pagina-sorteio) .esquerda.sorteio-com-pipoqueira .premios .acumulado-ativo{ box-shadow: 0 0 .9vw rgba(68, 224, 219, .25); }
:where(.pagina-sorteio) .esquerda.sorteio-com-pipoqueira{ display: flex; flex-direction: column; gap: .75vw; }
:where(.pagina-sorteio) .sorteio-com-pipoqueira > .video-moldura:not(.moldura-compacta){ display: none; }
:where(.pagina-sorteio) .sorteio-com-pipoqueira > .premios{ order: 2; flex: none; }
:where(.pagina-sorteio) .sorteio-com-pipoqueira > .painel-numeros{ order: 4; flex: none; }
:where(.pagina-sorteio) .esquerda .centro.centro-pipoqueira{ display: contents; }
:where(.pagina-sorteio) .esquerda.sorteio-com-pipoqueira .premios .premio-ativo,
:where(.pagina-sorteio) .esquerda.sorteio-com-pipoqueira .premios .acumulado-ativo{ animation: acumulado-descanso 3s ease-in-out 3s infinite; }
/* Same lateral expansion and sway as the resting screen's balancar-2 effect. */
@keyframes acumulado-descanso {
0% { transform: scaleX(.9) rotate(-3deg); }
3%, 9% { transform: scaleX(1.1) rotate(3deg); }
6%, 12% { transform: scaleX(1.1) rotate(-3deg); }
15%, 100% { transform: scaleX(1) rotate(0deg); }
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira{
display: contents;
}
/* Dados do sorteio em formato de bilhete: o canhoto à esquerda traz o número do sorteio e, depois do picote, as
informações da partida em linhas de rótulo e valor. Os furos do picote são recortados por máscara em --picote. */
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info{
--picote: 34%;
--furo: .45vw;
order: 1; flex: none; height: 6.6vw; position: relative;
width: 100%;
box-sizing: border-box;
padding: 0;
display: grid;
grid-template-columns: var(--picote) minmax(0, 1fr);
grid-template-rows: repeat(3, minmax(0, 1fr));
overflow: hidden;
background: rgba(0, 0, 0, .48); background: color-mix(in srgb, var(--tenth-color) 55%, transparent);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: .85vw;
-webkit-mask: radial-gradient(circle var(--furo) at var(--picote) 0, transparent 97%, #000), radial-gradient(circle var(--furo) at var(--picote) 100%, transparent 97%, #000);
-webkit-mask-composite: source-in;
mask: radial-gradient(circle var(--furo) at var(--picote) 0, transparent 97%, #000), radial-gradient(circle var(--furo) at var(--picote) 100%, transparent 97%, #000);
mask-composite: intersect;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info .box{
float: none;
box-sizing: border-box;
min-width: 0;
height: auto;
margin: 0;
padding: 0 1vw;
grid-column: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: .6vw;
border: 0;
border-radius: 0;
background: transparent;
text-align: left;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info .box:nth-child(n+2){ padding: 0 1vw; border-left: 0; }
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info .box:nth-child(n+3){ border-top: 1px solid rgba(255, 255, 255, .08); }
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info .box:first-child{
grid-column: 1;
grid-row: 1 / -1;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: .15vw;
padding: 0 1.1vw;
border-right: 2px dashed rgba(255, 255, 255, .22);
background: rgba(0, 0, 0, .3);
box-shadow: inset .3vw 0 0 var(--sixteenth-color, #ffd54a);
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info .box .label,
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info .box .value{
display: block;
position: static;
width: auto;
height: auto;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
line-height: 1.15;
color: #fff;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info .box .label{ flex: none; font-size: .72vw; font-weight: 600; letter-spacing: .06em; opacity: .6; }
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info .box .value{ font-size: 1.15vw; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info .box:first-child .label{ font-size: .68vw; opacity: .75; }
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info .box:first-child .value{
max-width: 100%;
font-size: 2.5vw;
font-weight: 800;
letter-spacing: .03em;
overflow: visible;
text-overflow: clip;
color: var(--sixteenth-color, #ffd54a);
text-align: left;
}
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .bolas > .ordem{
top: auto; right: auto; bottom: 8%; left: 50%; transform: translateX(-50%); z-index: 1;
height: 2.2vw;
padding: 0 .7vw;
display: flex;
align-items: center;
gap: .6vw;
border-radius: .55vw;
background: rgba(23, 31, 40, .88);
font-size: .7vw;
}
:where(.pagina-sorteio) .sorteio-pipoqueira .ordem-label{ opacity: .65; letter-spacing: .04em; }
:where(.pagina-sorteio) .sorteio-pipoqueira .ordem_sorteio{ font-size: 1.35vw; color: var(--sixteenth-color); }
:where(.pagina-sorteio) .pipoqueira-som{
pointer-events: auto;
position: absolute; top: 0; right: 0;
display: flex; align-items: center; justify-content: center;
width: 38px; height: 38px; padding: 0;
color: var(--fifteenth-color); background: var(--third-color);
border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
cursor: pointer;
}
:where(.pagina-sorteio) .sorteio-pipoqueira .pipoqueira-som{ top: .45vw; right: 1vw; width: 2.7vw; height: 2.7vw; min-width: 36px; min-height: 36px; }
:where(.pagina-sorteio) .pipoqueira-som[aria-pressed="true"]{ color: var(--sixteenth-color); background: color-mix(in srgb, var(--sixteenth-color) 10%, transparent); border-color: color-mix(in srgb, var(--sixteenth-color) 28%, transparent); }
:where(.pagina-sorteio) .pipoqueira-som:hover{ background: rgba(255,255,255,.15); }
:where(.pagina-sorteio) .pipoqueira-som:focus-visible{ outline: 2px solid var(--sixteenth-color); outline-offset: 3px; }
:where(.pagina-sorteio) .pipoqueira-som .material-icons{ font-size: 21px; }
:where(.pagina-sorteio) .pipoqueira-som[aria-busy="true"]{ color: var(--sixteenth-color); cursor: progress; }
:where(.pagina-sorteio) .pipoqueira-som-carregando{ width: 19px; height: 19px; box-sizing: border-box; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pipoqueira-audio-carregando .75s linear infinite; }
@keyframes pipoqueira-audio-carregando { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { :where(.pagina-sorteio) .pipoqueira-som-carregando{ animation: none; } }
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .bolas.pipoqueira-3d{
order: 3; flex: none; width: 100%; height: 30vw; position: relative;
background: radial-gradient(ellipse at 42% 44%, rgba(255,255,255,.09), transparent 66%);
}
:where(.pagina-sorteio) .sorteio-pipoqueira .bolas-pipoqueira .pipoqueira{ left: 0; width: 100%; }
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .bolas.pipoqueira-3d .bola:not(.bola-1){ display: none; }
@media (orientation: portrait), (max-width: 1024px) {
:where(.pagina-sorteio) .esquerda.sorteio-com-pipoqueira{ gap: 2vw; }
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .bolas.pipoqueira-3d{ height: 72vw; }
/* No celular as informações do sorteio ficam numa linha só, com o visual do card da próxima partida. */
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info{ height: auto; padding: 2.2vw 0; display: flex; overflow: visible; border: 2px solid var(--first-color); border-radius: 16px; background: linear-gradient(to bottom, var(--second-color), var(--third-color)); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); -webkit-mask: none; mask: none; }
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info .box,
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info .box:nth-child(n+2),
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info .box:first-child{ flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: .5vw; padding: 0 1.5vw; border: 0; background: transparent; box-shadow: none; }
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info .box + .box{ border-left: 1px solid rgba(255, 255, 255, .15); }
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info .box .label,
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info .box:first-child .label{ font-size: 2.7vw; line-height: 1.4; letter-spacing: .06em; color: var(--fifteenth-color); opacity: 1; text-align: center; }
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info .box .value,
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info .box:first-child .value{ font-size: 3.9vw; font-weight: 800; letter-spacing: 0; color: #fff; text-align: center; }
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .info .box:first-child .value{ color: var(--sixteenth-color, #ffd54a); }
/* Prêmios em duas linhas: em cima os prêmios da partida (1, 2, 3...); embaixo o acumulado e a Cartela Premiada
(roleta). Quem fica sozinho na linha ocupa a largura toda. O ::after quebra a linha e serve de
espaço entre elas. A largura do card não cresce com o texto e o valor diminui conforme a quantidade de
caracteres, que o app grava em --caracteres. */
:where(.pagina-sorteio) .esquerda.sorteio-com-pipoqueira .premios{ height: auto; flex-wrap: wrap; gap: 0 1.6vw; }
:where(.pagina-sorteio) .esquerda.sorteio-com-pipoqueira .premios::after{ content: ''; order: 2; flex: 0 0 100%; height: 2.2vw; }
:where(.pagina-sorteio) .esquerda.sorteio-com-pipoqueira .premios .premio{ order: 1; flex: 1 1 0; min-width: 0; height: 12.5vw; margin: 0; box-sizing: border-box; container-type: inline-size; }
:where(.pagina-sorteio) .esquerda.sorteio-com-pipoqueira .premios .premio.acumulado,
:where(.pagina-sorteio) .esquerda.sorteio-com-pipoqueira .premios .premio-roleta{ order: 3; }
:where(.pagina-sorteio) .esquerda.sorteio-com-pipoqueira .premios .premio .label{ height: 5vw; font-size: min(2.8vw, 11cqi); line-height: 1.05; }
:where(.pagina-sorteio) .esquerda.sorteio-com-pipoqueira .premios .premio .value{ font-size: min(5vw, calc(160cqi / var(--caracteres, 9))); white-space: nowrap; }
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .bolas > .ordem{ height: 7vw; padding: 0 2.5vw; border-radius: 2vw; gap: 2vw; font-size: 2.4vw; }
:where(.pagina-sorteio) .sorteio-pipoqueira .ordem_sorteio{ font-size: 4.8vw; }
:where(.pagina-sorteio) .sorteio-pipoqueira .pipoqueira-som{ top: 2.5vw; right: 3vw; width: 11vw; height: 11vw; min-width: 44px; min-height: 44px; border-radius: 2.5vw; }
}
@media (prefers-reduced-motion: reduce) {
:where(.pagina-sorteio) .esquerda.sorteio-com-pipoqueira .premios .premio-ativo:not(.acumulado),
:where(.pagina-sorteio) .esquerda.sorteio-com-pipoqueira .premios .acumulado-ativo{ animation: none; }
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas .bolas-pipoqueira .bola img{ animation: none !important; }
}
/* The visible order is part of the 3D base; keep its text available to assistive technology. */
:where(.pagina-sorteio) .esquerda .centro .sorteio-bolas.sorteio-pipoqueira .bolas > .ordem{ width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
/* Upcoming purchases remain separate from the cards being checked in the live draw. */
:where(.pagina-sorteio) :is(#app-kit-sorteio, #app-player) > .proxima-partida{
box-sizing: border-box;
margin: 0 1% 4px;
padding: 18px;
border: 2px solid var(--first-color);
border-radius: 16px;
background: linear-gradient(to bottom, var(--second-color), var(--third-color));
color: #fff;
font-family: Roboto, sans-serif;
font-size: 14px;
line-height: 1.4;
}
:where(.pagina-sorteio) .proxima-partida-topo, :where(.pagina-sorteio) .proxima-partida-controles, :where(.pagina-sorteio) .proxima-partida-total{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
:where(.pagina-sorteio) .proxima-partida-topo{ margin-bottom: 16px; }
:where(.pagina-sorteio) .proxima-partida-topo strong{ display: block; font-size: 22px; color: var(--first-color); }
:where(.pagina-sorteio) .proxima-partida-label{ display: block; font-size: 13px; }
:where(.pagina-sorteio) .proxima-partida-relogio{ text-align: right; }
:where(.pagina-sorteio) .proxima-partida-relogio span{ font-size: 11px; color: var(--fifteenth-color); }
:where(.pagina-sorteio) .proxima-partida-relogio strong{ font-size: 20px; font-variant-numeric: tabular-nums; color: var(--sixteenth-color); }
:where(.pagina-sorteio) .proxima-partida-info{ display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; margin: 0 0 14px; }
:where(.pagina-sorteio) .proxima-partida-info dt{ font-size: 10px; font-weight: 500; color: var(--fifteenth-color); }
:where(.pagina-sorteio) .proxima-partida-info dd{ margin: 3px 0 0; font-size: 14px; font-weight: 700; }
:where(.pagina-sorteio) .proxima-partida-compra{ margin-top: 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }
:where(.pagina-sorteio) .proxima-partida-compra label{ display: block; margin: 0 0 8px; font-size: 12px; color: var(--fifteenth-color); }
:where(.pagina-sorteio) .proxima-partida button, :where(.pagina-sorteio) .proxima-partida input{ box-sizing: border-box; font: inherit; color: inherit; border: 1px solid rgba(255,255,255,.25); background: var(--seventeenth-color); border-radius: 8px; min-height: 40px; }
:where(.pagina-sorteio) .proxima-partida button{ cursor: pointer; padding: 6px 12px; }
:where(.pagina-sorteio) .proxima-partida button:hover:not(:disabled){ background: var(--eleventh-color); }
:where(.pagina-sorteio) .proxima-partida button:disabled{ opacity: .4; cursor: default; }
:where(.pagina-sorteio) .proxima-partida button:focus-visible, :where(.pagina-sorteio) .proxima-partida input:focus-visible{ outline: 2px solid var(--sixteenth-color); outline-offset: 2px; }
:where(.pagina-sorteio) .proxima-partida-quantidade{ display: flex; gap: 4px; }
:where(.pagina-sorteio) .proxima-partida-quantidade button{ min-width: 38px; font-size: 20px; }
:where(.pagina-sorteio) .proxima-partida-quantidade input{ width: 60px; padding: 4px; text-align: center; background: var(--first-color); color: var(--fifth-color); font-weight: 700; appearance: textfield; -moz-appearance: textfield; }
:where(.pagina-sorteio) .proxima-partida-quantidade input::-webkit-inner-spin-button, :where(.pagina-sorteio) .proxima-partida-quantidade input::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0; }
:where(.pagina-sorteio) .proxima-partida-atalhos{ display: flex; gap: 5px; }
:where(.pagina-sorteio) .proxima-partida-atalhos button[aria-pressed="true"]{ border-color: var(--first-color); background: var(--eleventh-color); }
:where(.pagina-sorteio) .proxima-partida-total{ margin-top: 12px; }
:where(.pagina-sorteio) .proxima-partida-total strong{ font-size: 19px; }
:where(.pagina-sorteio) .proxima-partida-compra p{ margin: 8px 0 0; font-size: 12px; color: var(--sixteenth-color); }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-comprar{ width: 100%; margin-top: 12px; border: none; background: linear-gradient(to bottom, var(--twelfth-color), var(--eleventh-color)); color: var(--first-color); font-weight: 700; min-height: 44px; }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-comprar:hover:not(:disabled){ filter: brightness(1.1); }
@media (max-width: 420px) {
:where(.pagina-sorteio) :is(#app-kit-sorteio, #app-player) > .proxima-partida{ padding: 14px; }
:where(.pagina-sorteio) .proxima-partida-controles{ flex-wrap: wrap; gap: 8px; }
:where(.pagina-sorteio) .proxima-partida-info{ gap: 8px; }
:where(.pagina-sorteio) .proxima-partida-info dd{ font-size: 12px; }
}
:where(.pagina-sorteio) .proxima-partida-relogio{ margin-left: auto; }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-toggle{ display: flex; align-items: center; justify-content: center; flex: 0 0 40px; padding: 4px; }
:where(.pagina-sorteio) .proxima-partida.minimizada .proxima-partida-topo{ margin-bottom: 0; }
:where(.pagina-sorteio) :is(#app-kit-sorteio, #app-player) > .proxima-partida.minimizada{ padding: 8px 14px; }
:where(.pagina-sorteio) .proxima-partida.minimizada .proxima-partida-topo strong{ font-size: 18px; }
:where(.pagina-sorteio) .proxima-partida.minimizada .proxima-partida-identificacao{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
:where(.pagina-sorteio) .proxima-partida.minimizada .proxima-partida-identificacao > strong{ font-size: 14px; }
:where(.pagina-sorteio) .proxima-partida.minimizada .proxima-partida-label{ font-size: 12px; }
:where(.pagina-sorteio) .proxima-partida-premiacao-resumo{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; width: 100%; }
:where(.pagina-sorteio) .proxima-partida-premiacao-resumo > span{ font-size: 9px; color: var(--fifteenth-color); }
:where(.pagina-sorteio) .proxima-partida.minimizada .proxima-partida-premiacao-resumo strong{ font-size: 14px; }
:where(.pagina-sorteio) .proxima-partida.minimizada .proxima-partida-relogio strong{ display: flex; align-items: center; gap: 4px; white-space: nowrap; }
:where(.pagina-sorteio) .proxima-partida-relogio .proxima-partida-relogio-icone{ font-size: 18px; opacity: 1; }
/* Prize announcements size to their content and stay independent of card themes. */
:where(.pagina-sorteio) .premiado.premio-destaque, :where(.pagina-sorteio) .resultado-final{
position: fixed; inset: 0; z-index: 99999;
width: 100%; height: 100vh; height: 100dvh; box-sizing: border-box;
padding: 20px; background: rgba(0, 0, 0, .76); background: color-mix(in srgb, var(--tenth-color) 76%, transparent);
backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
align-items: center; justify-content: center;
color: #fff; font-family: Roboto, Arial, sans-serif;
}
:where(.pagina-sorteio) .premiado.premio-destaque.show{ display: flex; }
:where(.pagina-sorteio) .premio-destaque-janela{
display: flex; flex-direction: column; width: min(100%, 460px);
max-height: 100%; overflow: hidden; border-radius: 22px;
border: 1px solid rgba(255, 255, 255, .2); border-color: color-mix(in srgb, var(--sixteenth-color) 42%, transparent);
background: linear-gradient(150deg, var(--sixth-color), var(--third-color) 60%);
box-shadow: 0 28px 80px rgba(0,0,0,.5); box-shadow: 0 28px 80px rgba(0,0,0,.5), 0 0 40px color-mix(in srgb, var(--sixteenth-color) 6%, transparent);
}
:where(.pagina-sorteio) .premio-destaque-janela.varios-ganhadores{ width: min(100%, 880px); }
:where(.pagina-sorteio) .premio-destaque-cabecalho{
display: flex; align-items: center; gap: 14px; padding: 22px 24px;
flex: none; border-bottom: 1px solid rgba(255,255,255,.1); border-bottom-color: color-mix(in srgb, var(--sixteenth-color) 15%, transparent);
}
:where(.pagina-sorteio) .premio-destaque .premio-destaque-trofeu{ display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex: none; border-radius: 16px; font-size: 30px; color: var(--sixteenth-color); background: color-mix(in srgb, var(--sixteenth-color) 10%, transparent); }
:where(.pagina-sorteio) .premio-destaque-sorteio{ display: block; color: var(--fifteenth-color); font-size: 11px; letter-spacing: .05em; }
:where(.pagina-sorteio) .premio-destaque-cabecalho h2{ margin: 4px 0 0; color: var(--sixteenth-color); font-size: 27px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
:where(.pagina-sorteio) .premio-destaque-lista{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; padding: 22px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-color: var(--seventh-color) transparent; }
:where(.pagina-sorteio) .premio-destaque-lista:focus-visible{ outline: 2px solid var(--sixteenth-color); outline-offset: -3px; }
:where(.pagina-sorteio) .premio-destaque-cartela{ min-width: 0; padding: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.035); }
:where(.pagina-sorteio) .premio-destaque-identidade{ text-align: center; }
:where(.pagina-sorteio) .premio-destaque-identidade h3{ margin: 0; font-size: 23px; font-weight: 800; color: #fff; overflow-wrap: anywhere; line-height: 1.2; }
:where(.pagina-sorteio) .premio-destaque-identidade > span{ display: block; margin-top: 5px; font-size: 11px; color: var(--fifteenth-color); letter-spacing: .04em; }
:where(.pagina-sorteio) .premio-destaque-valor{ padding: 17px 0 20px; text-align: center; }
:where(.pagina-sorteio) .premio-destaque-valor > span{ display: block; font-size: 11px; color: var(--fifteenth-color); }
:where(.pagina-sorteio) .premio-destaque-valor > strong{ display: block; color: var(--sixteenth-color); font-size: clamp(26px, 5vw, 38px); font-weight: 800; line-height: 1.15; margin-top: 4px; overflow-wrap: anywhere; }
:where(.pagina-sorteio) .premio-destaque-grade{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
:where(.pagina-sorteio) .premio-destaque-grade.grade-nove{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
:where(.pagina-sorteio) .premio-destaque-numero{ display: flex; align-items: center; justify-content: center; min-width: 0; height: 42px; border: 1px solid transparent; border-radius: 7px; background: #f4f4f6; background: color-mix(in srgb, var(--fifteenth-color) 22%, #fff); color: var(--fifth-color); font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
:where(.pagina-sorteio) .premio-destaque-numero.sorteado, :where(.pagina-sorteio) .premio-destaque-legenda i.sorteado{ background: var(--eighth-color); color: #fff; border-color: var(--twelfth-color); }
:where(.pagina-sorteio) .premio-destaque-numero.marcar, :where(.pagina-sorteio) .premio-destaque-legenda i.marcar{ background: #14845d; color: #fff; border-color: #4cba8f; }
:where(.pagina-sorteio) .premio-destaque-numero.ultimo, :where(.pagina-sorteio) .premio-destaque-legenda i.ultimo{ background: #ed4458; color: #fff; border-color: #ff9aa7; box-shadow: 0 0 0 1px #ff9aa7; }
:where(.pagina-sorteio) .premio-destaque-legenda{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; padding: 0 18px 20px; flex: none; }
:where(.pagina-sorteio) .premio-destaque-legenda > span{ display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--fifteenth-color); }
:where(.pagina-sorteio) .premio-destaque-legenda i{ display: inline-block; width: 8px; height: 8px; border-radius: 3px; border: 1px solid transparent; }
@media (max-width: 480px) {
:where(.pagina-sorteio) .premiado.premio-destaque, :where(.pagina-sorteio) .resultado-final{ padding: 14px; }
:where(.pagina-sorteio) .premio-destaque-cabecalho{ padding: 18px; gap: 12px; }
:where(.pagina-sorteio) .premio-destaque-cabecalho h2{ font-size: 24px; }
:where(.pagina-sorteio) .premio-destaque-lista{ padding: 16px; gap: 14px; }
:where(.pagina-sorteio) .premio-destaque-cartela{ padding: 14px; }
:where(.pagina-sorteio) .premio-destaque-numero{ height: 38px; font-size: 20px; }
:where(.pagina-sorteio) .premio-destaque-legenda{ gap: 8px 12px; padding-bottom: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
:where(.pagina-sorteio) .premio-destaque.show .premio-destaque-janela{ animation: premio-destaque-entrada .22s ease-out both; }
@keyframes premio-destaque-entrada { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
}
:where(.pagina-sorteio) .resultado-final{ display: flex; }
:where(.pagina-sorteio) .resultado-final-janela{ width: min(100%, 640px); }
:where(.pagina-sorteio) .resultado-final-lista{ display: grid; gap: 12px; min-height: 0; overflow-y: auto; padding: 20px; overscroll-behavior: contain; scrollbar-color: var(--seventh-color) transparent; }
:where(.pagina-sorteio) .resultado-final-lista:focus-visible{ outline: 2px solid var(--sixteenth-color); outline-offset: -3px; }
:where(.pagina-sorteio) .resultado-final-premio{ min-width: 0; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); }
:where(.pagina-sorteio) .resultado-final-premio h3{ margin: 0 0 12px; font-size: 13px; font-weight: 800; color: var(--sixteenth-color); letter-spacing: .04em; line-height: 1.3; overflow-wrap: anywhere; }
:where(.pagina-sorteio) .resultado-final-ganhador{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
:where(.pagina-sorteio) .resultado-final-ganhador + .resultado-final-ganhador{ margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
:where(.pagina-sorteio) .resultado-final-identidade{ min-width: 0; flex: 1 1 100px; }
:where(.pagina-sorteio) .resultado-final-identidade strong{ display: block; color: #fff; font-size: 19px; line-height: 1.25; font-weight: 800; overflow-wrap: anywhere; }
:where(.pagina-sorteio) .resultado-final-identidade span{ display: block; margin-top: 4px; color: var(--fifteenth-color); font-size: 10px; letter-spacing: .03em; }
:where(.pagina-sorteio) .resultado-final-valor{ color: var(--sixteenth-color); font-size: 24px; line-height: 1.2; font-weight: 800; overflow-wrap: anywhere; max-width: 100%; }
@media (max-width: 480px) {
:where(.pagina-sorteio) .resultado-final-lista{ padding: 16px; gap: 10px; }
:where(.pagina-sorteio) .resultado-final-premio{ padding: 14px; }
:where(.pagina-sorteio) .resultado-final-identidade strong{ font-size: 18px; }
:where(.pagina-sorteio) .resultado-final-valor{ font-size: 22px; }
}
/* ===== Visual (portado do tema apostoulevou-prod v0.4.4) ===== */
/* Visual base do kit, portado do tema apostoulevou-prod (repo asseabradepremios/tema, v0.4.4).
Temas de sala carregam depois deste arquivo e só sobrescrevem o que mudar (cores em :root, logo). */
html {
overflow: hidden;
}
:root {
--first-color: #ffffff;
--second-color: #01325b;
--third-color: #021c33;
/* Azul escuro */
--fourth-color: #03294a;
/* Azul médio */
--fifth-color: #011522;
/* Azul muito escuro */
--sixth-color: #021b2e;
/* Azul escuro 2 */
--seventh-color: #355b73;
/* Azul acinzentado */
--eighth-color: #0055aa;
/* Azul vivo */
--ninth-color: #0077cc;
/* Azul claro/ciano */
--tenth-color: #010d1a;
/* Azul escuro profundo */
--eleventh-color: #1e5ceb;
/* Azul claro queimado */
--twelfth-color: #217aeb;
/* Azul intenso */
--thirteenth-color: #00294a;
/* Azul escuro */
--fourteenth-color: #041d33;
/* Azul marinho */
--fifteenth-color: #b5d9ff;
/* Azul claro / azul bebê */
--sixteenth-color: #ffff00;
/* Amarelo */
--seventeenth-color: #0044aa;
/* Azul vibrante */
--eighteenth-color: #333333;
/* Cinza escuro */
--nineteenth-color: #555555;
/* Cinza médio */
--twentieth-color: #666666;
/* Cinza claro */
--twenty-first-color: #222222;
/* Quase preto */
--green: #0077cc;
}
body {
background: radial-gradient(circle, var(--first-color), var(--second-color));
background-position: top;
background-size: cover;
overflow: auto;
padding-bottom: 1vw;
font-weight: 600;
padding-top: 10px;
}
.main{
padding: 5px 0 20px 0!important;
margin-top: 60px!important;
}
body,
.main-menu,
.main,
.modal-dialog .bilhete-melhores-cartelas,
.login-page {
background: var(--second-color) !important;
background-image: none;
}
.header .row{
flex-wrap: nowrap;
}
.header .material-icons{
font-size: 25px;
}
.main.hideHeader{
padding-top: 0px!important;
}
.proximos .acumulado {
overflow: visible!important;
animation: balancar-2 3s infinite ease-in-out;
}
.proximos .acumulado::before{
display: none;
}
/* Definindo o delay para cada item (intervalo entre animações) */
.proximos .linha .premio:nth-child(1),
.proximos .linha .premio:nth-child(1)::before {
animation-delay: 0s;
}
.proximos .linha .premio:nth-child(2),
.proximos .linha .premio:nth-child(2)::before {
animation-delay: 1s;
}
.proximos .linha .premio:nth-child(3),
.proximos .linha .premio:nth-child(3)::before {
animation-delay: 2s;
}
.proximos .linha .premio:nth-child(4),
.proximos .linha .premio:nth-child(4)::before {
animation-delay: 3s;
}
.proximos .linha .premio:nth-child(5),
.proximos .linha .premio:nth-child(5)::before {
animation-delay: 4s;
}
.three-prizes .premio{
overflow: hidden;
}
.three-prizes .premio::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 200%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
transform: translateY(-50%);
animation: shine 9s infinite;
}
@keyframes balancar {
0% {
transform: scaleX(0.9) rotate(-3deg); /* diminui e inclina */
}
1% {
transform: scaleX(1.1) rotate(3deg); /* diminui e inclina */
}
2% {
transform: scaleX(1.1) rotate(-3deg); /* aumenta e inclina pro outro lado */
}
3% {
transform: scaleX(1.1) rotate(3deg); /* volta ao normal */
}
4% {
transform: scaleX(1.1) rotate(-3deg); /* diminui e inclina */
}
5% {
transform: scaleX(1) rotate(0deg); /* parado por 3s */
}
100% {
transform: scaleX(1) rotate(0deg); /* parado por 3s */
}
}
@keyframes balancar-2 {
0% {
transform: scaleX(0.9) rotate(-3deg); /* diminui e inclina */
}
3% {
transform: scaleX(1.1) rotate(3deg); /* diminui e inclina */
}
6% {
transform: scaleX(1.1) rotate(-3deg); /* aumenta e inclina pro outro lado */
}
9% {
transform: scaleX(1.1) rotate(3deg); /* volta ao normal */
}
12% {
transform: scaleX(1.1) rotate(-3deg); /* diminui e inclina */
}
15% {
transform: scaleX(1) rotate(0deg); /* parado por 3s */
}
100% {
transform: scaleX(1) rotate(0deg); /* parado por 3s */
}
}
@keyframes pulse-ball {
0% {
transform: scale(1);
}
50% {
transform: scale(1.15);
}
100% {
transform: scale(1);
}
}
@keyframes shine {
0% {
opacity: 0;
left: -200%;
}
5% {
opacity: 1;
left: -100%;
}
10% {
opacity: 1;
left: 100%;
}
15% {
left: 200%;
opacity: 0;
}
100% {
left: 200%;
opacity: 0;
}
}
#comprar .qtd-bt {
background: var(--seventeenth-color);
color: var(--first-color);
border: none;
}
#comprar .bt-comprar,
#comprar .bt-menos-mais {
background: var(--third-color);
color: white;
}
.cartela {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.cartela .numero {
width: 19%;
position: relative;
}
/* Cabeçalho BINGO – desktop */
.cartela .numero:nth-child(2),
.cartela .numero:nth-child(3),
.cartela .numero:nth-child(4),
.cartela .numero:nth-child(5),
.cartela .numero:nth-child(6) {
margin-top: 2.3vw !important;
position: relative;
}
.cartela .numero:nth-child(2)::before,
.cartela .numero:nth-child(3)::before,
.cartela .numero:nth-child(4)::before,
.cartela .numero:nth-child(5)::before,
.cartela .numero:nth-child(6)::before {
position: absolute;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: var(--first-color);
background: var(--eighth-color);
border-radius: 0.5vw;
top: -2.4vw;
}
.coluna-direita .bilhete-melhores-cartelas.zoom-cartela-1 .numero:nth-child(2)::before,
.coluna-direita .bilhete-melhores-cartelas.zoom-cartela-1 .numero:nth-child(3)::before,
.coluna-direita .bilhete-melhores-cartelas.zoom-cartela-1 .numero:nth-child(4)::before,
.coluna-direita .bilhete-melhores-cartelas.zoom-cartela-1 .numero:nth-child(5)::before,
.coluna-direita .bilhete-melhores-cartelas.zoom-cartela-1 .numero:nth-child(6)::before {
top: -2.5vw !important;
}
.zoom-cartela-1 .cartela .numero:nth-child(2),
.zoom-cartela-1 .cartela .numero:nth-child(3),
.zoom-cartela-1 .cartela .numero:nth-child(4),
.zoom-cartela-1 .cartela .numero:nth-child(5),
.zoom-cartela-1 .cartela .numero:nth-child(6) {
margin-top: 2.5vw !important;
}
.coluna-direita .bilhete-melhores-cartelas.zoom-cartela-2 .numero {
width: 17.9% !important;
}
.coluna-direita .bilhete-melhores-cartelas.zoom-cartela-2 .numero:nth-child(2)::before,
.coluna-direita .bilhete-melhores-cartelas.zoom-cartela-2 .numero:nth-child(3)::before,
.coluna-direita .bilhete-melhores-cartelas.zoom-cartela-2 .numero:nth-child(4)::before,
.coluna-direita .bilhete-melhores-cartelas.zoom-cartela-2 .numero:nth-child(5)::before,
.coluna-direita .bilhete-melhores-cartelas.zoom-cartela-2 .numero:nth-child(6)::before {
top: -1.9vw !important;
}
.zoom-cartela-2 .cartela .numero:nth-child(2),
.zoom-cartela-2 .cartela .numero:nth-child(3),
.zoom-cartela-2 .cartela .numero:nth-child(4),
.zoom-cartela-2 .cartela .numero:nth-child(5),
.zoom-cartela-2 .cartela .numero:nth-child(6) {
margin-top: 1.8vw !important;
}
.cartela .numero:nth-child(2)::before {
content: "B";
}
.cartela .numero:nth-child(3)::before {
content: "I";
}
.cartela .numero:nth-child(4)::before {
content: "N";
}
.cartela .numero:nth-child(5)::before {
content: "G";
}
.cartela .numero:nth-child(6)::before {
content: "O";
}
.coluna-direita .bilhete-melhores-cartelas .cartela {
height: auto !important;
}
.cartelas-compradas {
background-image: none;
background: linear-gradient(
to right,
var(--fifteenth-color) 0%,
var(--first-color) 50%,
var(--fifteenth-color) 100%
);
}
.esquerda .premios .premio .value {
margin-top: 1vw !important;
}
.esquerda .premios .acumulado .label {
font-size: 1.2vw;
padding-right: 1vw;
}
/* (valor sobrescrito mais abaixo – mantido último) */
/* PROXIMOS – bloco único sem duplicação */
.proximos {
width: 100%;
padding: 1vw 2vw 0;
}
.proximos .linha:first-child {
background: rgba(255, 255, 255, 1);
margin-bottom: 0.5vw;
padding:5px 0;
}
.proximos .info{
height: auto;
}
.proximos .info:nth-child(1) .label,
.proximos .info:nth-child(2) .label,
.proximos .info:nth-child(3) .label,
.proximos .info:nth-child(4) .label,
.proximos .info:nth-child(5) .label{
color: black;
font-size: 1.4vw;
line-height:2vw;
}
.proximos .info:nth-child(1) .value,
.proximos .info:nth-child(2) .value,
.proximos .info:nth-child(3) .value,
.proximos .info:nth-child(4) .value,
.proximos .info:nth-child(5) .value{
color: var(--eleventh-color);;
font-size: 1.4vw;
line-height: 2vw;
}
.proximos .premio{
padding: 1.4vw 3vw;
}
.proximos .premio .balls{
display: none;
}
.proximos .premio {
background: linear-gradient(to bottom, var(--twelfth-color), var(--tenth-color));
border: 0.2vw solid var(--first-color);
color: white;
}
.proximos .acumulado {
z-index: 9;
background: linear-gradient(to bottom, var(--eighth-color), var(--thirteenth-color)) !important;
}
/* Contador de espera */
.espera .relogio {
height: auto;
padding: 1vw;
width: calc(100% - 4vw);
background: var(--fourth-color);
border-radius: 2vw;
font-family: 'Orbitron';
margin: auto;
}
.espera .relogio .numero {
color: var(--ninth-color);
border-color: var(--fourteenth-color);
background: var(--fourteenth-color);
font-weight: 400;
font-size: 6vw;
line-height: 8vw;
}
.espera .relogio .doispontos {
color: var(--ninth-color);
font-size: 6vw;
line-height: 8vw;
}
/* Premiado cartelas – desktop */
.premiado-cartelas .cartela .numero:nth-child(2),
.premiado-cartelas .cartela .numero:nth-child(3),
.premiado-cartelas .cartela .numero:nth-child(4),
.premiado-cartelas .cartela .numero:nth-child(5),
.premiado-cartelas .cartela .numero:nth-child(6) {
margin-top: 0!important;
}
.premiado-cartelas .cartela .numero:nth-child(2)::before,
.premiado-cartelas .cartela .numero:nth-child(3)::before,
.premiado-cartelas .cartela .numero:nth-child(4)::before,
.premiado-cartelas .cartela .numero:nth-child(5)::before,
.premiado-cartelas .cartela .numero:nth-child(6)::before {
margin-top: -0.8vw;
}
.premiado .premiado-cartelas{
gap: 20px;
align-content: start;
overflow: auto;
height: 80%;
}
.premiado .premiado-cartelas .premiado-cartelas{
width: 100%;
gap: 10px;
height: fit-content;
}
.premiado .cartela{
width: 48%;
margin: auto;
}
.premiado .cartela .numero {
width: 19.3% !important;
}
.principal {
padding-top: 30px;
overflow: hidden;
flex-wrap: wrap;
height: auto;
}
#modal-cartelas-compradas{
z-index: 9999;
}
#modal-cartelas-compradas .cartela .numero:nth-child(2)::before,
#modal-cartelas-compradas .cartela .numero:nth-child(3)::before,
#modal-cartelas-compradas .cartela .numero:nth-child(4)::before,
#modal-cartelas-compradas .cartela .numero:nth-child(5)::before,
#modal-cartelas-compradas .cartela .numero:nth-child(6)::before {
top: -1.8vw;
}
#modal-cartelas-compradas .cartela .numero {
width: 17% !important;
}
/* Bloco PRÊMIOS – desktop */
.esquerda .premios .premio {
border: 0.2vw solid var(--fifth-color);
border-radius: 1vw;
background: var(--sixth-color);
}
.esquerda .premios .premio-ativo {
border: 0.2 solid var(--sixteenth-color);
box-shadow:
0 0 5px cyan,
0 0 10px cyan,
0 0 20px cyan,
0 0 20px cyan,
0 0 20px cyan;
}
.esquerda .premios .premio .label {
width: 80%;
margin: auto;
margin-top: -0.6vw;
height: 3.2vw;
background-color: var(--seventh-color);
border-radius: 1vw;
display: flex;
align-items: center;
justify-content: center;
}
.esquerda .premios .acumulado {
border-color: var(--twenty-first-color);
background: var(--eighth-color);
color: var(--eighth-color);
box-shadow:
0 0 5px cyan,
0 0 10px cyan,
0 0 20px cyan,
0 0 20px cyan,
0 0 20px cyan;
}
.esquerda .premios .acumulado .label {
color: var(--first-color);
}
.esquerda .premios .acumulado .value {
position: relative;
color: var(--sixteenth-color);
}
.esquerda .premios .acumulado-desativo {
box-shadow: none;
background: var(--eighteenth-color);
}
.esquerda .premios .acumulado-desativo .label {
background: var(--nineteenth-color);
color: var(--twentieth-color);
}
.esquerda .premios .acumulado-desativo .value {
color: var(--twentieth-color);
}
.premios .acumulado-desativo .acumulado-numero {
opacity: 0.2;
}
.premios .acumulado .acumulado-numero {
right: -1.2vw;
top: -1vw;
z-index: 9;
font-size: 1.5vw;
}
.star {
right: -1vw;
top: -1vw;
z-index: 8;
}
/* PROXIMOS – ajustes gerais */
.proximos .info .value {
font-size: 2.5vw;
line-height: 4vw;
}
.proximos .acumulado {
background: linear-gradient(to bottom, rgb(255, 0, 0), rgb(105 0 0)) !important;
color: yellow;
}
.numAcumulado {
color: red;
z-index: 9;
}
.video-descanso {
height: 36vw;
}
.esquerda .centro{
pointer-events: none;
}
/* SORTEIO BOLAS – valor principal */
.esquerda .centro .sorteio-bolas .info .box .value {
background: var(--fifth-color);
border: 2px solid var(--fourth-color);
padding-top: 2vw;
}
.esquerda .centro .sorteio-bolas .info .box .label {
background: var(--seventeenth-color);
color: var(--fifteenth-color);
}
/* Bola principal animada */
.esquerda .centro .sorteio-bolas .bolas .bola-1 {
z-index: 90;
}
.animaBolaPrincipal {
animation: bolaAnimate 1s ease;
z-index: 91;
}
@keyframes bolaAnimate {
0% {
transform: scale(5) rotate(0deg);
}
100% {
transform: scale(1) rotate(360deg);
}
}
h1.premio-title {
width: 100%;
text-align: center;
box-sizing: border-box;
font-size: 2rem;
font-weight: bold;
font-family: "Elms Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: yellow;
text-transform: uppercase;
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
-webkit-text-stroke: unset;
font-weight: 900;
margin-bottom: 50px;
}
#modal-result-partida h1.premio-title {
background: linear-gradient(to bottom, var(--twelfth-color), var(--tenth-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transform: rotate(-5deg);
margin-bottom: 30px;
}
.ganhadores-final.show {
min-height: 100vh;
height: 100vh;
overflow: auto;
padding-top: 0;
padding-bottom: 200px;
}
.ganhadores-final-title{
display: none;
}
.login-box .align-right img {
display: none;
}
.h-100 {
overflow-x: hidden;
}
.header {
background-image: none;
background-color: var(--fourth-color);
}
/* Espaço à direita só para o botão flutuante do WhatsApp/JivoChat, quando a sala tem um. */
.tem-chat .header {
padding-right: 60px;
}
/* Saldo do kit no topo (kit.partials.botao-saldo). */
.botao-saldo {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 12px 0 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .18);
background: rgba(0, 0, 0, .28);
color: #fff;
font-weight: 700;
font-size: 15px;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .25);
transition: background .15s, transform .15s;
}
.botao-saldo.com-recarga {
padding-right: 4px;
}
.botao-saldo:hover,
.botao-saldo:focus {
color: #fff;
text-decoration: none;
}
/* Sem gateway o botão é só um mostrador de saldo. */
.botao-saldo:not(.com-recarga) {
cursor: default;
}
.botao-saldo.com-recarga:hover,
.botao-saldo.com-recarga:focus {
background: rgba(0, 0, 0, .4);
}
.botao-saldo.com-recarga:active {
transform: scale(.96);
}
.header .botao-saldo .material-icons {
margin: 0;
}
.header .botao-saldo .botao-saldo-carteira {
font-size: 20px;
color: #2ee06f;
}
.botao-saldo-valor {
letter-spacing: .2px;
font-variant-numeric: tabular-nums;
}
.header .botao-saldo .botao-saldo-recarga {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin-left: 4px;
border-radius: 50%;
background: linear-gradient(180deg, #34d86a 0%, #1fa74a 100%);
color: #fff;
font-size: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
@media (max-width: 380px) {
.botao-saldo {
font-size: 13px;
gap: 4px;
padding-left: 8px;
}
.header .botao-saldo .botao-saldo-carteira {
display: none;
}
}
/* Botão de som do sorteio no topo (kit.partials.botao-som), no mesmo formato do saldo; ligado fica na cor do tema. */
.botao-som {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin-right: 6px;
padding: 0;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .18);
background: rgba(0, 0, 0, .28);
color: #fff;
vertical-align: middle;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .25);
cursor: pointer;
transition: background .15s, transform .15s;
}
.botao-som[v-cloak] {
display: none;
}
.botao-som:hover {
background: rgba(0, 0, 0, .4);
}
.botao-som:active {
transform: scale(.96);
}
.botao-som:focus {
outline: none;
}
.botao-som:focus-visible {
outline: 2px solid var(--sixteenth-color);
outline-offset: 2px;
}
.botao-som[aria-pressed="true"] {
color: var(--first-color);
background: var(--seventeenth-color);
border-color: var(--eleventh-color);
}
.botao-som[aria-pressed="true"]:hover {
background: var(--eleventh-color);
}
.botao-som[aria-busy="true"] {
cursor: progress;
}
.header .botao-som .material-icons {
margin: 0;
font-size: 20px;
}
/* GANHADORES FINAL – blocos */
.ganhadores-final .box-amarelo {
border: 0.4vw solid yellow;
background-color: var(--fifth-color) !important;
padding-bottom: 30px;
font-family: "Elms Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
animation: pulse2 2s infinite;
padding-bottom: 50px;
overflow: auto;
}
.ganhadores-final .box:first-child img:last-child {
display: none;
}
.ganhadores-final .box-amarelo .box-ganhador {
height: auto;
width: 60%;
margin: 2vw;
padding: 10px;
border-radius: 10px;
border: 2px solid yellow;
animation: pulse2 2s infinite;
background: linear-gradient(
to top,
rgb(0 196 255 / 10%),
rgb(30 51 105 / 10%)
) !important;
}
.ganhadores-final .box-amarelo .box-ganhador .nome {
color: yellow;
font-weight: 900;
font-size: 1.2vw;
padding: 0 10px;
margin: 0;
width: 100%;
}
.ganhadores-final .box-amarelo .box-ganhador .codigo {
color: var(--eleventh-color);
background: yellow;
font-weight: 900;
border-radius: 10px;
font-size: 1.5vw;
}
.ganhadores-final .box-amarelo .box-ganhador .valor {
color: white;
font-weight: 900;
font-size: 1.5vw;
}
/* Cartelas / listas direita */
.coluna-direita .bilhete-melhores-cartelas .cartela .cupom,
.coluna-direita .bilhete-melhores-cartelas .cartela .doador,
.coluna-direita .lista-melhores-cartelas .topo,
.premiado .cartela .doador,
.premiado .cartela .rodape {
background: var(--fifth-color);
color: white;
}
.esquerda .painel-numeros .numero {
background: var(--fifteenth-color);
}
.esquerda .painel-numeros .sorteado,
.coluna-direita .lista-melhores-cartelas .corpo .faltam span {
background: var(--seventeenth-color);
color: white;
}
.esquerda .painel-numeros .ultimo {
background: yellow;
color: red;
}
.esquerda .premios .premio-desativo .label{
background: var(--nineteenth-color);
color: var(--twentieth-color);
}
.esquerda .premios .premio-desativo .value {
color: var(--twentieth-color);
}
.esquerda .premios .premio-desativo {
background: var(--eighteenth-color);
}
.coluna-direita .lista-melhores-cartelas{
top: 0;
margin-bottom: 1vw;
}
.coluna-direita .lista-melhores-cartelas .corpo .doador {
color: var(--fifth-color);
}
.premiado .cartela .sorteado {
background: var(--seventeenth-color);
}
.premiado .cartela .ultimo {
background: red !important;
}
.cartela .sorteado {
background: var(--seventeenth-color) !important;
}
.esquerda .painel-numeros {
background-color: rgba(0, 0, 0, 0.5);
}
.premiado .janela .box {
color: yellow;
background: var(--eleventh-color);
}
/* Login */
form#sign_in h2.font-weight-normal.mb-5 {
color: white !important;
padding: 10px 20px !important;
text-align: center !important;
border-radius: 25px !important;
font-size: 20px !important;
margin-bottom: 10px !important;
}
.float-label .form-control.text-white {
border-radius: 60px 20px 20px 60px;
background: white;
width: 100%;
position: relative;
}
form#sign_in .form-group {
position: relative;
padding: 0;
}
form#sign_in .form-group input {
color: white;
background: none;
border-radius: 0;
padding-left: 50px;
padding-right: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
form#sign_in .form-group::before {
font-family: 'Material Icons';
content: "";
display: flex;
font-size: 24px;
color: white;
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 100%;
padding-top: 6px;
justify-content: center;
z-index: 9;
}
form#sign_in .form-group:has(input[name="email"])::before {
content: "perm_identity" !important;
}
form#sign_in .form-group:has(input[name="password"])::before {
content: "lock" !important;
}
form#sign_in .form-group:has(input[name="password_confirmation"])::before {
content: "lock" !important;
}
form#sign_in .form-group:has(input[name="cpf"])::before {
content: "assignment_ind" !important;
}
form#sign_in .float-label .form-control-label {
display: none;
}
/**
* STYLE COMPRAR
*/
.modal-comprar #comprar {
height: 200px;
padding-top: 50px!important;
}
.modal-comprar .div-esq {
width: 100%;
}
.modal-comprar .div-dir {
float: none;
display: flex;
width: 100%;
}
.modal-comprar .div-100 {
display: flex;
width: 100%;
height: auto;
justify-content: space-between;
gap: 5px;
}
.modal-comprar .div-100r {
width: 100%;
height: auto;
display: flex;
gap: 10px;
margin: 5px 0;
}
.modal-comprar .quadro-qtd {
height: auto;
display: flex;
width: 50%;
}
#comprar .bt-menos-mais {
height: auto;
}
.modal-comprar .div-100r .input-valor input {
width: 100%;
height: 30px;
border: none;
background: #efefef;
font-weight: 500;
border-radius: 10px;
padding: 0 10px;
}
.modal-comprar .div-dir button {
top: 0;
width: 100%;
color: white;
border: none;
border-radius: 10px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.modal-comprar #comprar .qtd-bt {
background: white;
color: var(--fourth-color);
border: 1px solid var(--fourth-color);
width: 12%;
border-radius: 10px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.modal-comprar .quadro-qtd input {
width: 100%;
height: 30px;
text-align: center;
}
.modal-comprar .bt-menos-mais {
width: 20%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
height: 30px;
}
.modal-comprar .input-qtd {
width: 60%;
}
.modal-comprar .menos-mais-esquerda {
border-radius: 10px 0 0 10px;
}
.modal-comprar .menos-mais-direita {
border-radius: 0 10px 10px 0;
}
/* Removendo cabeçalho BINGO via override */
.numero::before {
display: none !important;
}
.cartela .numero:nth-child(2),
.cartela .numero:nth-child(3),
.cartela .numero:nth-child(4),
.cartela .numero:nth-child(5),
.cartela .numero:nth-child(6),
.zoom-cartela-2 .cartela .numero:nth-child(2),
.zoom-cartela-2 .cartela .numero:nth-child(3),
.zoom-cartela-2 .cartela .numero:nth-child(4),
.zoom-cartela-2 .cartela .numero:nth-child(5),
.zoom-cartela-2 .cartela .numero:nth-child(6),
.zoom-cartela-1 .cartela .numero:nth-child(2),
.zoom-cartela-1 .cartela .numero:nth-child(3),
.zoom-cartela-1 .cartela .numero:nth-child(4),
.zoom-cartela-1 .cartela .numero:nth-child(5),
.zoom-cartela-1 .cartela .numero:nth-child(6),
.premiado-cartelas .cartela .numero:nth-child(2),
.premiado-cartelas .cartela .numero:nth-child(3),
.premiado-cartelas .cartela .numero:nth-child(4),
.premiado-cartelas .cartela .numero:nth-child(5),
.premiado-cartelas .cartela .numero:nth-child(6) {
margin-top: 0 !important;
}
/* Layout / branding */
.menu-footer {
position: relative;
margin-top: 50px;
}
.header .navbar-brand {
background-size: auto 100% !important;
color: transparent !important;
height: 50px !important;
display: none;
}
.especial {
border: 2px solid var(--fourth-color);
background: linear-gradient(to bottom, white, var(--fifteenth-color));
position: relative;
}
.super.especial {
border: 2px solid red;
background: linear-gradient(to bottom, white, #ffa7a2);
position: relative;
}
.nome-sala {
width: 0;
}
.login-page {
max-width: 100%;
height: 100vh;
margin: 0 auto;
}
.login-box {
max-width: 360px;
margin: auto;
padding: 20px 0;
}
body:has(form#sign_in) {
background-color: black;
height: 100vh;
}
html:has(form#sign_in) {
overflow: auto;
}
.login-page .login-box .logo {
text-align: center !important;
padding-top: 47px;
height: 110px;
background-size: contain !important;
}
.login-page .btn {
background: var(--fourth-color) !important;
font-weight: 700;
transition: 0.5s;
font-size: 12px !important;
border: none !important;
}
/* Animação de pulse do ganhador */
@keyframes pulse2 {
0%, 100% {
box-shadow:
0 0 2px cyan,
0 0 4px cyan,
0 0 6px cyan,
0 0 8px cyan;
}
50% {
box-shadow:
0 0 4px cyan,
0 0 6px cyan,
0 0 8px cyan,
0 0 10px cyan;
}
}
.proximos .acumulado.major .label, .proximos .acumulado.major .value{
font-size: 3.5vw !important;
}
.proximos .acumulado.minor .label, .proximos .acumulado.minor .value{
font-size: 3vw !important;
}
.proximos .acumulado.mini .label, .proximos .acumulado.mini .value{
font-size: 2.5vw !important;
}
.compra-fechada .bilhete-melhores-cartelas{
height: 19vw;
}
.acumulado .star-acumulado{
top: -3vw;
}
.cartelas-compradas{
padding-right: 50px;
}
.modal{
padding: 50px 0 50px;
}
.modal-dialog-scrollable .modal-body{
overflow: auto;
height: 90vh;
}
/* =========================
MEDIA QUERY – PORTRAIT
========================= */
@media (orientation: portrait) {
.ganhadores-final.show {
padding-top: 4vw;
}
.coluna-direita .bilhete-melhores-cartelas {
margin-bottom: 50px!important;
}
.main, #app-kit-games{
min-height: unset!important;
height: auto!important;
}
.modal{
padding: 50px 0 50px;
}
.modal-dialog-scrollable{
max-height: max-content;
}
.modal-dialog-scrollable .modal-content{
max-height: max-content;
overflow: unset;
}
.premiado .premiado-cartelas .premiado-cartelas{
width: 80%;
margin: auto;
}
.premiado .cartela{
width: 100%;
}
.acumulado .star-acumulado{
top: -5vw;
}
.compra-fechada .bilhete-melhores-cartelas{
height: auto;
}
.video-descanso {
height: 56vw;
}
.proximos .info .value {
font-size: 3.2vw;
}
.principal {
padding-top: 10px;
min-height: 100vh!important;
align-content: flex-start;
}
.premiado-cartelas .cartela .numero:nth-child(2),
.premiado-cartelas .cartela .numero:nth-child(3),
.premiado-cartelas .cartela .numero:nth-child(4),
.premiado-cartelas .cartela .numero:nth-child(5),
.premiado-cartelas .cartela .numero:nth-child(6) {
margin-top: 0!important;
}
.premiado-cartelas .cartela .numero:nth-child(2)::before,
.premiado-cartelas .cartela .numero:nth-child(3)::before,
.premiado-cartelas .cartela .numero:nth-child(4)::before,
.premiado-cartelas .cartela .numero:nth-child(5)::before,
.premiado-cartelas .cartela .numero:nth-child(6)::before {
margin-top: 0.2vw;
}
.esquerda .premios {
height: 13vw;
}
.esquerda .premios .premio {
border: 0.5vw solid var(--fifth-color);
border-radius: 2vw;
background: var(--sixth-color);
}
.esquerda .premios .acumulado .label {
font-size: 2.5vw;
}
.esquerda .premios .premio .value {
font-size: 3.5vw;
}
.esquerda .premios .premio-ativo {
border: 1vw solid var(--sixteenth-color);
box-shadow:
0 0 5px cyan,
0 0 10px cyan,
0 0 20px cyan,
0 0 20px cyan,
0 0 20px cyan;
}
.esquerda .premios .premio .label {
width: 80%;
margin: auto;
margin-top: -0.6vw;
height: 5vw;
background-color: var(--seventh-color);
border-radius: 1vw;
display: flex;
align-items: center;
justify-content: center;
}
.esquerda .premios .acumulado {
border-color: var(--twenty-first-color);
background: var(--eighth-color);
color: var(--eighth-color);
box-shadow:
0 0 5px cyan,
0 0 10px cyan,
0 0 20px cyan,
0 0 20px cyan,
0 0 20px cyan;
}
.esquerda .premios .acumulado .label {
color: var(--first-color);
}
.esquerda .premios .acumulado .value {
color: var(--sixteenth-color);
}
.esquerda .premios .acumulado .value::before {
margin: 0 5%;
width: 90%;
font-size: 2vw;
height: 5vw;
}
.esquerda .premios .acumulado-desativo {
background: var(--eighteenth-color);
box-shadow: none;
}
.esquerda .premios .acumulado-desativo .label {
background: var(--nineteenth-color);
color: var(--twentieth-color);
}
.esquerda .premios .acumulado-desativo .value {
background: var(--eighteenth-color);
color: var(--twentieth-color);
}
.premios .acumulado .acumulado-numero {
right: -3vw;
top: -1vw;
}
.star {
right: -3vw;
top: -1vw;
}
.premiado .cartela .numero {
width: 19.5% !important;
}
.espera {
padding: 2vw 0 0;
height: auto;
background: none;
}
.espera .relogio {
height: auto;
padding: 2vw;
width: calc(100% - 4vw);
background: var(--fourth-color);
border-radius: 2vw;
font-family: 'Orbitron';
}
.espera .relogio .numero {
color: var(--ninth-color);
border-color: var(--fourteenth-color);
background: var(--fourteenth-color);
}
.espera .relogio .doispontos {
color: var(--ninth-color);
}
.proximos {
width: 100%;
padding: 2vw 2vw 0;
}
.proximos .linha:first-child {
background: rgba(255, 255, 255, 1);
margin-bottom: 0.5vw;
}
.proximos .premio {
border: 0.4vw solid var(--first-color);
}
.cartela .numero:nth-child(2),
.cartela .numero:nth-child(3),
.cartela .numero:nth-child(4),
.cartela .numero:nth-child(5),
.cartela .numero:nth-child(6) {
margin-top: 0 !important;
position: relative;
}
.coluna-direita {
padding: 1vw;
}
.coluna-direita .bilhete-melhores-cartelas.zoom-cartela-2 .cartela-25,
.coluna-direita .bilhete-melhores-cartelas.zoom-cartela-1 .cartela-25 {
height: auto !important;
}
.cartela .numero:nth-child(2)::before,
.cartela .numero:nth-child(3)::before,
.cartela .numero:nth-child(4)::before,
.cartela .numero:nth-child(5)::before,
.cartela .numero:nth-child(6)::before {
position: absolute;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: var(--first-color);
background: var(--eighth-color);
border-radius: 1vw;
top: -5.8vw;
}
.coluna-direita .bilhete-melhores-cartelas.zoom-cartela-1 .numero:nth-child(2)::before,
.coluna-direita .bilhete-melhores-cartelas.zoom-cartela-1 .numero:nth-child(3)::before,
.coluna-direita .bilhete-melhores-cartelas.zoom-cartela-1 .numero:nth-child(4)::before,
.coluna-direita .bilhete-melhores-cartelas.zoom-cartela-1 .numero:nth-child(5)::before,
.coluna-direita .bilhete-melhores-cartelas.zoom-cartela-1 .numero:nth-child(6)::before {
top: -8.8vw !important;
}
.coluna-direita .bilhete-melhores-cartelas .cartela {
height: auto !important;
}
.cartelas-compradas {
background-image: none;
background: linear-gradient(
to right,
var(--fifteenth-color) 0%,
var(--first-color) 50%,
var(--fifteenth-color) 100%
);
}
#modal-cartelas-compradas .cartela .numero:nth-child(2)::before,
#modal-cartelas-compradas .cartela .numero:nth-child(3)::before,
#modal-cartelas-compradas .cartela .numero:nth-child(4)::before,
#modal-cartelas-compradas .cartela .numero:nth-child(5)::before,
#modal-cartelas-compradas .cartela .numero:nth-child(6)::before {
top: -4.5vw;
}
#modal-cartelas-compradas .cartela .numero {
width: 19% !important;
}
.esquerda .centro .sorteio-bolas .info .box {
height: 8.5vw;
}
.ganhadores-final::before{
content: "";
}
/* Ajustes específicos de ganhadores em portrait */
.ganhadores-final .box-amarelo {
margin: 20px 50px;
}
.ganhadores-final .box-amarelo .box-ganhador {
width: 80%;
}
/* Ajustes gerais da coluna esquerda */
.esquerda {
padding: 1% 1% 0;
}
.ganhadores-final .box-amarelo .box-ganhador .nome,
.ganhadores-final .box-amarelo .box-ganhador .codigo,
.ganhadores-final .box-amarelo .box-ganhador .valor {
font-size: 4vw;
}
.proximos .acumulado.major .label, .proximos .acumulado.major .value{
font-size: 7vw !important;
}
.proximos .acumulado.minor .label, .proximos .acumulado.minor .value{
font-size: 6vw !important;
}
.proximos .acumulado.mini .label, .proximos .acumulado.mini .value{
font-size: 5vw !important;
}
.proximos .premio{
padding: 3vw;
}
html, body { height: 100%; margin: 0;
}
}
.proximos .linha:first-child .box{
flex: 1; /* cada box ocupa a mesma fração */
box-sizing: border-box;
}
.proximos .linha:first-child .box:not(:last-child) {
border-right: 1px solid #999;
}
.proximos .linha:first-child .info::before{
display: none;
}
.one-prizes .proximos .premio .balls{
margin-left: 10vw;
font-weight: 600;
font-size: 1.5vw;
display: block;
}
.one-prizes .proximos .premio{
width: 70%;
height: auto;
margin: auto;
text-transform: uppercase!important;
border-color: white;
display: flex;
justify-content: normal;
color: yellow;
animation: balancar 9s infinite ease-in-out;
}
.one-prizes .proximos .acumulado {
background: linear-gradient(to bottom, var(--twelfth-color), var(--tenth-color))!important;
color: white;
}
.one-prizes .proximos .premio .value{
position: absolute;
right: 3vw;
}
.one-prizes .proximos .premio .label{
font-size: 1.2vw;
}
.one-prizes .proximos .acumulado .label{
font-size: 2vw;
}
/* Primeiro elemento */
.one-prizes .proximos .major {
width: 100%;
margin: 2px auto;
}
.premios .major .acumulado-numero span,
.premios .minor .acumulado-numero span,
.premios .mini .acumulado-numero span{
font-size: 2vw;
}
.one-prizes .numAcumulado {
color: white;
font-weight: 600;
font-size: 2vw;
}
.one-prizes .proximos .premio .star-acumulado{
top: unset!important;
}
.one-prizes .proximos .acumulado .label{
display: flex;
align-items: center;
}
.one-prizes .proximos .major .star-acumulado{
background-image: url('/images/ball-gold.png');
}
/* Segundo elemento */
.one-prizes .proximos .minor {
width: 90%;
margin: 2px auto;
}
.one-prizes .proximos .minor .star-acumulado{
background-image: url('/images/ball-silver.png');
}
/* Terceiro elemento */
.one-prizes .proximos .mini {
width: 80%;
margin: 2px auto;
}
.one-prizes .proximos .mini .star-acumulado{
background-image: url('/images/ball-bronze.png');
}
.one-prizes .proximos .premio .label::before{
display: none!important;
}
.one-prizes .acumulado .star-acumulado {
width: 3.5vw;
height: 3.5vw;
max-width: 95px;
max-height: 95px;
padding: 0;
top: -2.5vw;
border-radius: 100%;
animation: pulse-ball 1.5s infinite ease-in-out;
}
@media (orientation: portrait) {
.espera .relogio .numero{
font-size: 16vw!important;
line-height: 18vw!important;
}
.espera .relogio .doispontos{
font-size: 16vw!important;
line-height: 18vw!important;
}
iframe{
height: calc(100vh - 120px)!important;
}
.one-prizes .acumulado .star-acumulado {
width: 9vw;
height: 9vw;
}
.one-prizes .proximos .premio .label{
padding-right: 0;
font-size: 3vw;
}
.one-prizes .proximos .premio .balls{
font-size: 3vw;
margin-left: 14vw;
}
.proximos .info .label{
font-size: 4vw!important;
line-height: 4.5vw!important;
}
.proximos .info .value{
font-size: 4vw!important;
line-height: 4.5vw!important;
}
.proximos .show_points_and_players .info .value,
.proximos .show_points_and_players .info .label{
font-size: 3vw!important;
line-height: 3.5vw!important;
}
.premios .major .acumulado-numero span,
.premios .minor .acumulado-numero span,
.premios .mini .acumulado-numero span{
font-size: 4vw;
}
.one-prizes .numAcumulado{
font-size: 4vw;
}
}
#app-kit-games{
display: flex;
flex-wrap: wrap;
gap: 20px;
padding-top: 10px;
padding-bottom: 10px;
align-content: start;
justify-content: center;
}
.game-card {
max-width: 500px;
border-radius: 10px;
overflow: hidden;
}
.game-card .btn{
position: absolute;
bottom: 5px;
right: 10px;
}
#app-kit-rodadas-finalizadas .card-body p{
font-size: 0.8rem;
}
#app-kit-rodadas-finalizadas .card-body h6{
font-size: 0.8rem!important;
margin-bottom: 20px!important;
}
#modal-rodadas, #app-kit-rodadas, #app-kit-minhas-rodadas{
z-index: 9999;
}
.modal-comprar{
z-index: 9999;
align-content: center;
}
@media (orientation: portrait) {
.cartelas-compradas{
font-size: 3.5vw;
}
#app-kit-rodadas .card-body .col-3,
#app-kit-rodadas-finalizadas .card-body .col-3{
flex: 50%;
max-width: 50%;
margin-top: 10px;
}
}
#app-kit-games{
min-height: 100vh;
}
.ganhadores-final .box-amarelo{
border-color: cyan;
}
.ganhadores-final{
flex-wrap: wrap;
flex: 100%;
justify-content: center;
height: 100vh;
overflow: auto;
}
.ganhadores-final .box{
display: none;
}
.ganhadores-final .box-amarelo{
display: flex;
}
.ganhadores-final .box-amarelo .box-ganhador{
border: 0;
box-shadow: 0 0 5px cyan, 0 0 10px cyan, 0 0 20px cyan, 0 0 20px cyan, 0 0 20px cyan;
background: var(--sixth-color);
max-width: 400px;
}
.ganhadores-final .box-amarelo .box-ganhador .codigo{
background-color: var(--seventh-color);
color: white;
width: 100%;
margin: auto;
margin-top: -20px;
max-width: 200px;
}
h1.premio-title {
--bg-size: 400%;
--color-one: hsl(60 90% 70%);
--color-two: hsl(40 95% 55%);
background: linear-gradient(
90deg,
yellow,
rgb(255, 255, 255),
yellow
)
0 0 / var(--bg-size) 100%;
animation: move-bg 5s infinite linear reverse;
color: transparent;
background-clip: text;
}
@keyframes move-bg {
to {
background-position: var(--bg-size) 0;
}
}
.alert{
margin: 15px;
}
.nav .nav-link[href*="/kit/games"] {
background: red;
color: white;
margin: 5px 0;
}
.nav .nav-link[href*="/kit/games"] .arrow {
color: white!important;
}
iframe{
height: 100%;
overflow: auto;
}
iframe body{
padding-bottom: 100px;
}
.propaganda{
position: relative;
z-index: 9;
}
.propaganda{
position: relative;
}
#owl-propaganda {
width: 100%;
max-width: 100%;
margin: 0 auto;
max-width:90%;
}
#owl-propaganda .owl-stage-outer,
#owl-propaganda .owl-stage,
#owl-propaganda .owl-item,
#owl-propaganda .item {
height: auto !important;
max-height: none !important;
}
#owl-propaganda .owl-stage-outer {
overflow: hidden;
}
#owl-propaganda .item img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.footer {
border-radius: 0;
background-color: var(--fourteenth-color);
justify-content: center;
align-items: center;
right: 0;
left: unset;
z-index: 999999999;
}
.footer .row{
display: flex;
align-items: center;
height: 100%;
}
.footer .col-auto{
height: fit-content;
}
.footer .col-auto a{
padding: 5px 10px;
filter: brightness(1000%);
}
.footer a:not(.btn){
padding: 0 15px;
border-top: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.footer a:not(.btn) p{
line-height: 11px;
}
.footer a:not(.btn) i, .footer a:not(.btn) span{
width: 16px;
height: 16px;
}
.material-icons{
font-size: 16px;
}
.footer a{
color: white!important;
}
.footer a:hover{
color: var(--sixteenth-color)!important;
}
.menu-btn .material-icons{
font-size: 25px;
}
.back-btn .material-icons{
font-size: 25px;
}
@media (orientation: portrait) {
#owl-propaganda .owl-stage-outer,
#owl-propaganda .owl-stage,
#owl-propaganda .owl-item,
#owl-propaganda .item {
height: auto !important;
max-height: none !important;
}
.footer {
height: 50px;
width: 100%;
display: flex;
}
#buttons-footer{
width: 20%;
height: 50px;
display: flex;
flex-wrap: nowrap;
max-width: 600px;
margin: auto;
}
}
html:has(.app-kit-games iframe),
body:has(.app-kit-games iframe) {
overflow: hidden!important;
}
body.no-scroll-game {
overflow: hidden !important;
height: 100vh !important;
}
/* trava também o container que costuma rolar em layout flex */
body.no-scroll-game > main.main {
overflow: hidden !important;
height: 100vh !important;
}
#buttons-footer a{
cursor: pointer;
}
.footer a:not(.btn):hover i, .footer a:not(.btn):hover p{
color: cyan;
}
.header .btn-link{
text-decoration: none;
}
.header .btn-link i{
margin-right: 5px;
}
.header .btn-link:hover{
color: cyan;
}
.only-desktop {
display: inline;
}
.only-mobile {
display: none;
}
@media (orientation: portrait) {
.esquerda, .coluna-direita{
width: 100%;
}
#owl-propaganda {
max-width: 100%;
}
.only-desktop {
display: none;
}
.only-mobile {
display: inline;
}
}
.modal{
padding-top: 50px;
}
.iframe .modal{
padding-top: 0;
}
.principal{
padding-top: 0;
}
.iframe .principal{
padding-top: 30px;
}
#modal-comprar, #modal-auto-comprar{
margin-top: 50px;
padding-top: 10px;
padding-bottom: 60px;
z-index: 99991;
}
#modal-auto-comprar .modal-body .media h6{
font-size: 15px;
}
#modal-auto-comprar .modal-body .media input{
background: white;
color: var(--fifth-color);
}
#modal-auto-comprar .input-qtd{
width: 100%;
margin: auto;
height: 40px;
border: none;
border-top:1px solid var(--fifth-color);
border-bottom:1px solid var(--fifth-color);
}
#modal-auto-comprar .input-qtd input{
width: 100%;
height: 100%;
text-align: center;
border: none;
}
#modal-auto-comprar .quadro-qtd{
margin: 10px auto;
}
#modal-auto-comprar .bt-menos-mais{
background-color: var(--fifth-color);
color: white;
height: 40px;
}
#modal-auto-comprar .qtd-bt{
background-color: var(--eighth-color);
color: white;
padding: 10px 3%;
border-radius: 10px;
}
#modal-auto-comprar .card{
border: none;
border-radius: 0;
border-bottom: 1px solid #999;
}
#modal-comprar .qtd-bt {
width: 11.5%;
height: 50px;
line-height: 50px;
border-radius: 10px;
font-size: 22px;
font-weight: 600;
margin: 0;
background: var(--seventeenth-color);
color: var(--first-color);
border: none;
width: 100%;
text-align: center;
}
#modal-comprar .bt-comprar,
#modal-comprar .bt-menos-mais {
background: var(--third-color);
color: white;
}
@media(max-width: 500px) {
#modal-auto-comprar .qtd-bt {
padding: 5px 1.6%;
border-radius: 5px;
font-size: 13px;
}
}
#modal-auto-comprar .div-dir button{
background: green;
color: white;
}
@media (orientation: landscape) {
.esquerda .centro {
height: 25vw;
}
.esquerda .centro .sorteio-bolas .info .box {
height: 5vw;
margin: 4% 0;
}
.esquerda .painel-numeros{
padding: 0.5% 1%;
}
}
#modal-rodadas .card-body > .row > .col-4:only-child {
max-width: 100%;
width: 100%;
display: flex;
flex: 1;
gap: 10px;
}
#modal-rodadas .card-body .col-4 p.mb-1{
font-size: 12px;
}
/* Base: transforma o container em flex (o Bootstrap row pode atrapalhar) */
#buttons-footer{
display: flex !important;
width: fit-content;
justify-content: space-around; /* ou space-between */
align-items: center;
}
/* garante que order funcione */
#buttons-footer > a{
flex: 1 1 0;
text-align: center;
}
/* =========================================================
3 BOTÕES (exatamente 3 )
Queremos: [2º] [HOME] [3º]
(HOME é o 1º no HTML)
========================================================= */
#buttons-footer:has(> a:nth-child(3)):not(:has(> a:nth-child(4))) > a:nth-child(1){ order: 2; } /* home */
#buttons-footer:has(> a:nth-child(3)):not(:has(> a:nth-child(4))) > a:nth-child(2){ order: 1; }
#buttons-footer:has(> a:nth-child(3)):not(:has(> a:nth-child(4))) > a:nth-child(3){ order: 3; }
/* =========================================================
4 BOTÕES (exatamente 4 )
Centro "mais natural" (par): [2º] [HOME] [3º] [4º]
========================================================= */
#buttons-footer:has(> a:nth-child(4)):not(:has(> a:nth-child(5))) > a:nth-child(1){ order: 2; } /* home */
#buttons-footer:has(> a:nth-child(4)):not(:has(> a:nth-child(5))) > a:nth-child(2){ order: 1; }
#buttons-footer:has(> a:nth-child(4)):not(:has(> a:nth-child(5))) > a:nth-child(3){ order: 3; }
#buttons-footer:has(> a:nth-child(4)):not(:has(> a:nth-child(5))) > a:nth-child(4){ order: 4; }
/* =========================================================
5 BOTÕES (exatamente 5 )
Queremos: [2º] [3º] [HOME] [4º] [5º]
========================================================= */
#buttons-footer:has(> a:nth-child(5)):not(:has(> a:nth-child(6))) > a:nth-child(1){ order: 3; } /* home */
#buttons-footer:has(> a:nth-child(5)):not(:has(> a:nth-child(6))) > a:nth-child(2){ order: 1; }
#buttons-footer:has(> a:nth-child(5)):not(:has(> a:nth-child(6))) > a:nth-child(3){ order: 2; }
#buttons-footer:has(> a:nth-child(5)):not(:has(> a:nth-child(6))) > a:nth-child(4){ order: 4; }
#buttons-footer:has(> a:nth-child(5)):not(:has(> a:nth-child(6))) > a:nth-child(5){ order: 5; }
/* =========================================================
6 BOTÕES (exatamente 6 )
Centro "mais natural" (par): [2º] [3º] [HOME] [4º] [5º] [6º]
========================================================= */
#buttons-footer:has(> a:nth-child(6)):not(:has(> a:nth-child(7))) > a:nth-child(1){ order: 3; } /* home */
#buttons-footer:has(> a:nth-child(6)):not(:has(> a:nth-child(7))) > a:nth-child(2){ order: 1; }
#buttons-footer:has(> a:nth-child(6)):not(:has(> a:nth-child(7))) > a:nth-child(3){ order: 2; }
#buttons-footer:has(> a:nth-child(6)):not(:has(> a:nth-child(7))) > a:nth-child(4){ order: 4; }
#buttons-footer:has(> a:nth-child(6)):not(:has(> a:nth-child(7))) > a:nth-child(5){ order: 5; }
#buttons-footer:has(> a:nth-child(6)):not(:has(> a:nth-child(7))) > a:nth-child(6){ order: 6; }
/* bloqueia geral */
body {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* libera seleção onde faz sentido */
input,
textarea,
[contenteditable],
.select-text {
-webkit-user-select: text;
-ms-user-select: text;
user-select: text;
}
/* ===========================
MODAL AUTO-COMPRAR (COMPACTO)
=========================== */
#modal-auto-comprar.modal-comprar .modal-dialog{
margin: 0 auto;
max-width: 520px;
}
#modal-auto-comprar .modal-content{
border-radius: 14px;
overflow: hidden;
}
/* Header menor */
#modal-auto-comprar .modal-header{
padding: 10px 12px;
background: var(--fourth-color);
color: #fff;
border: 0;
}
#modal-auto-comprar .modal-title{
font-size: 14px;
letter-spacing: .5px;
}
#modal-auto-comprar .modal-header .close{
color: #fff;
opacity: 1;
font-size: 26px;
line-height: 1;
}
/* Body mais compacto e sem “cards grandes” */
#modal-auto-comprar .modal-body{
padding: 10px 12px 92px; /* espaço pro CTA fixo */
}
/* Mata espaçamentos do bootstrap dentro do modal */
#modal-auto-comprar .card{
border: 0;
border-bottom: 1px solid rgba(0,0,0,.10);
border-radius: 0;
margin-bottom: 10px !important; /* sobrescreve mb-3 */
background: #fff;
}
#modal-auto-comprar .card-body{
padding: 10px 0;
}
#modal-auto-comprar .media,
#modal-auto-comprar .media-body{
margin: 0;
padding: 0;
}
/* Títulos menores e colados */
#modal-auto-comprar .modal-body .media h6{
margin: 0 0 6px;
font-size: 12px;
font-weight: 800;
color: var(--fourteenth-color);
text-transform: uppercase;
letter-spacing: .4px;
}
/* Preço (input grande) vira “placa” */
#modal-auto-comprar .large-gift-card{
height: 44px;
border-radius: 10px;
border: 1px solid rgba(0,0,0,.12);
font-size: 22px;
font-weight: 900;
color: var(--fourteenth-color);
}
/* Linhas de controle (menos espaço vertical) */
#modal-auto-comprar .div-100r{
gap: 8px;
margin: 4px 0 6px;
}
/* Stepper (+ / input / -) mais “flat” e compacto */
#modal-auto-comprar .quadro-qtd{
width: 100%;
gap: 0;
}
#modal-auto-comprar .bt-menos-mais{
height: 38px;
width: 48px; /* botão fixo */
background: var(--fifth-color);
color: #fff;
font-size: 18px;
border-radius: 10px;
}
#modal-auto-comprar .input-qtd{
height: 38px;
border: 1px solid rgba(0,0,0,.18);
border-left: 0;
border-right: 0;
}
#modal-auto-comprar .input-qtd input{
font-size: 16px;
font-weight: 800;
color: var(--fourteenth-color);
}
/* Grid dos botões rápidos (em vez de “linha solta”) */
#modal-auto-comprar .div-100{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
/* Botões rápidos mais compactos */
#modal-auto-comprar .qtd-bt{
padding: 8px 0;
border-radius: 10px;
font-size: 13px;
font-weight: 900;
background: var(--eighth-color);
color: #fff;
text-align: center;
}
/* MAX diferente (menos “igual a tudo”) */
#modal-auto-comprar .qtd-bt:last-child{
background: var(--third-color);
}
/* TOTAL: vira uma faixa compacta */
#modal-auto-comprar .card:last-of-type{
border-bottom: 0;
margin-bottom: 0 !important;
}
#modal-auto-comprar .card:last-of-type .card-body{
padding-bottom: 6px;
}
/* CTA fixo no fundo do modal */
#modal-auto-comprar .div-dir{
bottom: 0;
background: #fff;
padding: 10px 12px 12px;
border-top: 1px solid rgba(0,0,0,.12);
margin: 0 -12px -10px; /* cola nas bordas do body */
}
#modal-auto-comprar .div-dir .bt-comprar{
height: 48px;
border-radius: 12px;
background: #0a8f2a; /* verde */
font-weight: 900;
letter-spacing: .3px;
box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
/* Mobile bem pequeno: 4 colunas nos botões rápidos */
@media (max-width: 360px){
#modal-auto-comprar .div-100{
grid-template-columns: repeat(4, 1fr);
}
}
/* ===========================
MODAL COMPRAR (COMPACTO)
=========================== */
#modal-comprar.modal-comprar .modal-dialog{
margin: 0 auto;
max-width: 520px;
}
#modal-comprar .modal-content{
border-radius: 14px;
overflow: hidden;
}
/* Header menor e mais limpo */
#modal-comprar .modal-header{
padding: 10px 12px;
background: var(--fourth-color);
color: #fff;
border: 0;
}
#modal-comprar .modal-title{
font-size: 13px;
font-weight: 900;
letter-spacing: .2px;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#modal-comprar .modal-header .close{
color: #fff;
opacity: 1;
font-size: 26px;
line-height: 1;
}
/* Body compacto + espaço pro CTA fixo */
#modal-comprar .modal-body{
padding: 10px 12px 92px;
}
/* Remove “gordura” dos cards/mb-3/rows */
#modal-comprar .card{
border: 0;
border-bottom: 1px solid rgba(0,0,0,.10);
border-radius: 0;
margin-bottom: 10px !important;
background: #fff;
}
#modal-comprar .card-body{
padding: 10px 0;
}
#modal-comprar .media,
#modal-comprar .media-body{
margin: 0;
padding: 0;
}
/* Textos do topo (valor/cartelas) mais compactos */
#modal-comprar .card-body h6.mb-1{
margin: 0 0 4px !important;
font-size: 12px;
font-weight: 900;
color: var(--fourteenth-color);
text-transform: uppercase;
letter-spacing: .25px;
}
/* Bloco do prêmio: força layout mais “inline” e sem espaçamento */
#modal-comprar .card-body .row{
margin: 6px 0 0;
}
#modal-comprar .card-body .col-4{
flex: 0 0 100%;
max-width: 100%;
padding: 0;
}
#modal-comprar .card-body .col-4 p.mb-1{
margin: 0 !important;
font-size: 11px;
opacity: .8;
}
#modal-comprar .card-body .col-4 h6.mb-1{
margin: 2px 0 0 !important;
font-size: 12px;
}
/* Faixa de SALDO (fica bem evidente e ocupa pouco) */
#modal-comprar > .modal-dialog > .modal-content > .modal-body > .row{
margin: 0 0 10px;
}
#modal-comprar > .modal-dialog > .modal-content > .modal-body > .row .col-12{
padding: 0;
}
#modal-comprar > .modal-dialog > .modal-content > .modal-body > .row h6{
margin: 0;
padding: 10px 12px;
border-radius: 12px;
background: rgba(0, 128, 0, .10);
border: 1px solid rgba(0, 128, 0, .18);
font-size: 13px;
font-weight: 900;
}
/* Área de compra compacta */
#modal-comprar .div-esq{
width: 100%;
}
/* Grid de quantidades (melhor que linha solta) */
#modal-comprar .div-100{
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
width: 100%;
height: auto;
margin-bottom: 10px;
}
/* Botões quantidade */
#modal-comprar .div-esq .qtd-bt{
height: 42px;
line-height: 42px;
border-radius: 12px;
font-size: 14px;
font-weight: 900;
background: var(--eighth-color);
color: #fff;
border: 0;
text-align: center;
}
/* Linha do stepper + valor lado a lado */
#modal-comprar .div-100r{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
width: 100%;
margin: 0;
}
#modal-comprar .quadro-qtd{
width: 100%;
display: flex;
gap: 0;
}
#modal-comprar .bt-menos-mais{
width: 48px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: var(--fifth-color);
color: #fff;
font-size: 18px;
border-radius: 12px;
}
#modal-comprar .menos-mais-esquerda{ border-radius: 12px 0 0 12px; }
#modal-comprar .menos-mais-direita{ border-radius: 0 12px 12px 0; }
#modal-comprar .input-qtd{
height: 42px;
border: 1px solid rgba(0,0,0,.18);
border-left: 0;
border-right: 0;
}
#modal-comprar .input-qtd input{
height: 100%;
font-size: 16px;
font-weight: 900;
color: var(--fourteenth-color);
background: #fff;
border: 0;
}
/* Campo valor compra */
#modal-comprar .input-valor input{
height: 42px;
border-radius: 12px;
border: 1px solid rgba(0,0,0,.12);
background: #fff;
font-weight: 900;
text-align: center;
color: var(--fourteenth-color);
}
/* CTA fixo no fundo */
#modal-comprar .div-dir{
position: sticky;
bottom: 0;
background: #fff;
padding: 10px 12px 12px;
border-top: 1px solid rgba(0,0,0,.12);
margin: 12px -12px -10px;
width: calc(100% + 24px);
}
#modal-comprar .div-dir .bt-comprar{
width: 100%;
height: 48px;
border-radius: 12px;
background: #0a8f2a;
color: #fff;
font-weight: 900;
letter-spacing: .3px;
border: 0;
box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
/* Ajustes para telas bem pequenas */
@media (max-width: 360px){
#modal-comprar .div-100{
grid-template-columns: repeat(3, 1fr);
}
#modal-comprar .div-100r{
grid-template-columns: 1fr;
}
}
/* 1 item */
#modal-comprar .card-body .row:has(> .col-4:only-child) > .col-4 {
flex: 0 0 100%;
max-width: 100%;
}
/* Exatamente 2 itens */
#modal-comprar .card-body .row:has(> .col-4:nth-child(2):last-child) > .col-4 {
flex: 0 0 50%;
max-width: 50%;
}
/* Exatamente 3 itens */
#modal-comprar .card-body .row:has(> .col-4:nth-child(3):last-child) > .col-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
/* Exatamente 4 itens */
#modal-comprar .card-body .row:has(> .col-4:nth-child(4):last-child) > .col-4 {
flex: 0 0 25%;
max-width: 25%;
}
/* 5 itens ou mais: 3 por linha */
#modal-comprar .card-body .row:has(> .col-4:nth-child(5)) > .col-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
#modal-comprar .card-body .row > .col-4 h6 {
margin-bottom: 15px !important;
}
.acumulado-ativo, .premio-ativo{
animation: balancar-2 3s infinite ease-in-out;
}
.acumulado-ativo{
animation-delay: 1s; /* atraso de 1 segundo */
}
.premio-ativo {
animation-delay: 2s; /* atraso de 1 segundo */
}
.nome-sala{
display: none;
}
@media (max-width: 500px) {
.footer a:not(.btn) i, .footer a:not(.btn) span{
width: 13px;
height: 13px;
}
.material-icons{
font-size: 13px;
}
.footer a:not(.btn){
padding: 0 8px;
}
.footer a:not(.btn) p{
font-size: 8px;
}
}
.one-prizes .proximos .acumulado.mini .value span,
.one-prizes .proximos .acumulado.minor .value span,
.one-prizes .proximos .acumulado.major .value span,
.one-prizes .proximos .premio .value span{
display: none;
}
.premio.acumulado.major.acumulado-ativo{
position: relative;
z-index: 9;
}
.premio.acumulado.minor.acumulado-ativo{
position: relative;
z-index: 8;
}
.premio.acumulado.mini.acumulado-ativo{
position: relative;
z-index: 7;
}
.esquerda .centro .sorteio-bolas .bolas .bola{
border: none!important;
}
/* Tela de espera: relógio como cronômetro — dígitos numa moldura, com marcações dos segundos que se apagam
a cada segundo (--segundos vem da view).
Não vale para o relógio clássico (.relogio-classico, Sala::RELOGIOS), que fica como era antes. */
:root {
--cronometro-moldura: linear-gradient(to bottom, #eef1f5, #a4acb6 42%, #5f6873 58%, #cdd2d9);
--cronometro-marca: var(--sixteenth-color, #ffd000);
--cronometro-marca-apagada: rgba(255, 255, 255, .14);
}
:where(.pagina-sorteio) .espera .relogio:where(:not(.relogio-classico)) {
--cronometro-marcas: repeating-linear-gradient(to right, #000 0 calc(100% / 60 - max(.12vw, 2px)), transparent 0 calc(100% / 60));
position: relative;
box-sizing: border-box;
width: calc(100% - 4vw);
height: auto;
/* Em cima, só a altura do botão (::before), para ele alinhar com o topo do card de compra. */
margin: 1.2vw auto 1vw;
padding: 1.6vw 1.4vw;
border: .45vw solid transparent;
border-radius: 2vw;
background: linear-gradient(var(--fourth-color), var(--fourth-color)) padding-box, var(--cronometro-moldura) border-box;
box-shadow: inset 0 .3vw 1vw rgba(0, 0, 0, .45), 0 .5vw 1.2vw rgba(0, 0, 0, .4);
}
/* Botão do cronômetro, em cima da moldura. */
:where(.pagina-sorteio) .espera .relogio:where(:not(.relogio-classico))::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
width: 7vw;
height: 1.2vw;
margin-bottom: .45vw;
transform: translateX(-50%);
border-radius: .5vw .5vw 0 0;
background: var(--cronometro-moldura);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* Marcações dos segundos em cima e embaixo dos dígitos: acesas até o segundo atual, apagadas no resto. */
:where(.pagina-sorteio) .espera .relogio:where(:not(.relogio-classico))::after {
--faixa: .55vw;
content: "";
position: absolute;
inset: .5vw 1.6vw;
pointer-events: none;
background:
linear-gradient(var(--cronometro-marca), var(--cronometro-marca)) left / calc(var(--segundos, 60) * 100% / 60) 100% no-repeat,
var(--cronometro-marca-apagada);
-webkit-mask: var(--cronometro-marcas) top / 100% var(--faixa) no-repeat, var(--cronometro-marcas) bottom / 100% var(--faixa) no-repeat;
mask: var(--cronometro-marcas) top / 100% var(--faixa) no-repeat, var(--cronometro-marcas) bottom / 100% var(--faixa) no-repeat;
transition: background-size .35s ease-out;
}
@media (prefers-reduced-motion: reduce) {
:where(.pagina-sorteio) .espera .relogio:where(:not(.relogio-classico))::after { transition: none; }
}
@media (min-width: 1025px) and (orientation: landscape) {
:where(.pagina-sorteio) .espera .relogio:where(:not(.relogio-classico)) .numero,
:where(.pagina-sorteio) .espera .relogio:where(:not(.relogio-classico)) .doispontos { font-size: 4.6vw; line-height: 5.2vw; }
}
@media (orientation: portrait), (max-width: 1024px) {
:where(.pagina-sorteio) .espera .relogio:where(:not(.relogio-classico)) {
margin: 3.6vw auto 2vw;
padding: 3.6vw 2vw;
border-width: 1.1vw;
border-radius: 3.5vw;
}
:where(.pagina-sorteio) .espera .relogio:where(:not(.relogio-classico))::before { width: 16vw; height: 2.6vw; margin-bottom: 1.1vw; border-radius: 1.2vw 1.2vw 0 0; }
:where(.pagina-sorteio) .espera .relogio:where(:not(.relogio-classico))::after { --faixa: 1.3vw; inset: 1.1vw 3vw; }
:where(.pagina-sorteio) .espera .relogio:where(:not(.relogio-classico)) .numero,
:where(.pagina-sorteio) .espera .relogio:where(:not(.relogio-classico)) .doispontos { font-size: 12vw !important; line-height: 14vw !important; }
}
/* Acumulado com estrela em destaque. Só existe quando a rodada tem premio_acumulado (na espera, acumulado_valor),
então nada aqui reserva espaço quando ele não vem. Os acumulados por faixa (major/minor/mini) ficam de fora. */
:root {
--acumulado-fundo: linear-gradient(to bottom, #ff0000, #690000);
--acumulado-destaque: var(--sixteenth-color);
}
:where(.pagina-sorteio) .proximos .linha > .acumulado:not(.major, .minor, .mini),
:where(.pagina-sorteio) .esquerda .premios > .acumulado-ativo:not(.major, .minor, .mini) {
position: relative;
background: var(--acumulado-fundo) !important;
border: max(.25vw, 3px) solid var(--acumulado-destaque);
box-shadow: 0 0 1.4vw var(--acumulado-destaque);
box-shadow: 0 0 0 max(.15vw, 2px) color-mix(in srgb, var(--acumulado-destaque) 30%, transparent),
0 0 1.6vw color-mix(in srgb, var(--acumulado-destaque) 60%, transparent);
}
:where(.pagina-sorteio) .proximos .linha > .acumulado:not(.major, .minor, .mini) .value,
:where(.pagina-sorteio) .esquerda .premios > .acumulado-ativo:not(.major, .minor, .mini) .value {
color: var(--acumulado-destaque);
font-weight: 800;
text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
/* Na espera o valor cresce; no sorteio o box tem a largura dos outros prêmios, então o valor fica no tamanho normal. */
:where(.pagina-sorteio) .proximos .linha > .acumulado:not(.major, .minor, .mini) .value {
transform: scale(1.3);
transform-origin: right center;
}
/* Reflexo de luz atravessando o box. */
:where(.pagina-sorteio) .proximos .linha > .acumulado:not(.major, .minor, .mini)::after,
:where(.pagina-sorteio) .esquerda .premios > .acumulado-ativo:not(.major, .minor, .mini)::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .4) 50%, transparent 62%) no-repeat;
background-size: 250% 100%;
background-position: 150% 0;
animation: acumulado-brilho 3.5s ease-in-out infinite;
}
@keyframes acumulado-brilho {
0% { background-position: 150% 0; }
55%, 100% { background-position: -50% 0; }
}
/* Prêmios da espera, com qualquer quantidade: o mesmo reflexo do acumulado, passando um depois do outro. Substitui
o brilho antigo, que só existia com três prêmios (.three-prizes). */
:where(.pagina-sorteio) .proximos .linha > .premio:not(.acumulado)::before {
content: none;
}
:where(.pagina-sorteio) .proximos .linha > .premio:not(.acumulado)::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .4) 50%, transparent 62%) no-repeat;
background-size: 250% 100%;
background-position: 150% 0;
animation: acumulado-brilho 3.5s ease-in-out infinite;
}
:where(.pagina-sorteio) .proximos .linha > .premio:not(.acumulado):nth-child(2)::after { animation-delay: 0.25s; }
:where(.pagina-sorteio) .proximos .linha > .premio:not(.acumulado):nth-child(3)::after { animation-delay: 0.5s; }
:where(.pagina-sorteio) .proximos .linha > .premio:not(.acumulado):nth-child(4)::after { animation-delay: 0.75s; }
:where(.pagina-sorteio) .proximos .linha > .premio:not(.acumulado):nth-child(5)::after { animation-delay: 1s; }
:where(.pagina-sorteio) .proximos .linha > .premio:not(.acumulado):nth-child(6)::after { animation-delay: 1.25s; }
@media (prefers-reduced-motion: reduce) {
:where(.pagina-sorteio) .proximos .linha > .premio:not(.acumulado)::after { animation: none; opacity: 0; }
}
/* Espera: primeiro da lista e mais alto que as barras de prêmio. */
:where(.pagina-sorteio) .proximos .linha > .acumulado:not(.major, .minor, .mini) {
order: -1;
height: 6.4vw;
}
@media (orientation: portrait), (max-width: 1024px) {
:where(.pagina-sorteio) .proximos .linha > .acumulado:not(.major, .minor, .mini) { height: 13vw; }
}
@media (prefers-reduced-motion: reduce) {
:where(.pagina-sorteio) .proximos .linha > .acumulado:not(.major, .minor, .mini)::after,
:where(.pagina-sorteio) .esquerda .premios > .acumulado-ativo:not(.major, .minor, .mini)::after { animation: none; opacity: 0; }
}
/* Estrela do acumulado lapidada: dez faces claras e escuras com luz vindo de cima à esquerda, borda e sombra,
na cor do tema. Fica centralizada na altura do rótulo e flutua devagar; a sombra se afasta quando ela sobe. */
:where(.pagina-sorteio) .proximos .linha > .acumulado:not(.major, .minor, .mini) .star-acumulado {
--estrela-cor: var(--acumulado-destaque);
--estrela-sombra: #9a4a00;
top: 50%;
padding-top: .5vw;
border-radius: 0;
background: none;
transform: translateY(-54%) rotate(15deg);
filter: drop-shadow(.08em .15em .07em rgba(0, 0, 0, .55)) drop-shadow(0 0 .25em color-mix(in srgb, var(--estrela-cor) 45%, transparent));
animation: estrela-acumulado-flutuar 3s ease-in-out infinite;
}
:where(.pagina-sorteio) .proximos .linha > .acumulado:not(.major, .minor, .mini) .star-acumulado::before,
:where(.pagina-sorteio) .proximos .linha > .acumulado:not(.major, .minor, .mini) .star-acumulado::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
clip-path: polygon(50% 4%, 66.46% 31.35%, 97.55% 38.55%, 76.63% 62.65%, 79.39% 94.45%, 50% 82%, 20.61% 94.45%, 23.37% 62.65%, 2.45% 38.55%, 33.54% 31.35%);
}
/* Borda: clara em cima à esquerda, escura embaixo à direita. */
:where(.pagina-sorteio) .proximos .linha > .acumulado:not(.major, .minor, .mini) .star-acumulado::before {
background: linear-gradient(135deg,
color-mix(in srgb, var(--estrela-cor) 50%, #fff) 10%,
color-mix(in srgb, var(--estrela-cor) 40%, var(--estrela-sombra)) 75%);
}
/* Faces: cada ponta tem um lado claro e um escuro. */
:where(.pagina-sorteio) .proximos .linha > .acumulado:not(.major, .minor, .mini) .star-acumulado::after {
transform: scale(.88);
transform-origin: 50% 54%;
background:
radial-gradient(circle at 40% 34%, rgba(255, 255, 255, .35), transparent 38%),
conic-gradient(from 0deg at 50% 54%,
color-mix(in srgb, var(--estrela-cor) 92%, #fff) 0deg 36deg,
color-mix(in srgb, var(--estrela-cor) 85%, var(--estrela-sombra)) 36deg 72deg,
color-mix(in srgb, var(--estrela-cor) 55%, var(--estrela-sombra)) 72deg 108deg,
color-mix(in srgb, var(--estrela-cor) 38%, var(--estrela-sombra)) 108deg 144deg,
color-mix(in srgb, var(--estrela-cor) 72%, var(--estrela-sombra)) 144deg 180deg,
color-mix(in srgb, var(--estrela-cor) 50%, var(--estrela-sombra)) 180deg 216deg,
color-mix(in srgb, var(--estrela-cor) 85%, var(--estrela-sombra)) 216deg 252deg,
color-mix(in srgb, var(--estrela-cor) 80%, #fff) 252deg 288deg,
color-mix(in srgb, var(--estrela-cor) 40%, #fff) 288deg 324deg,
color-mix(in srgb, var(--estrela-cor) 62%, #fff) 324deg 360deg);
}
:where(.pagina-sorteio) .proximos .linha > .acumulado:not(.major, .minor, .mini) .star-acumulado .numAcumulado {
position: relative;
z-index: 1;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
@keyframes estrela-acumulado-flutuar {
0%, 100% {
transform: translateY(-54%) rotate(15deg);
filter: drop-shadow(.08em .15em .07em rgba(0, 0, 0, .55)) drop-shadow(0 0 .25em color-mix(in srgb, var(--estrela-cor) 45%, transparent));
}
50% {
transform: translateY(-61%) rotate(15deg);
filter: drop-shadow(.13em .36em .15em rgba(0, 0, 0, .32)) drop-shadow(0 0 .35em color-mix(in srgb, var(--estrela-cor) 55%, transparent));
}
}
@media (orientation: portrait), (max-width: 1024px) {
:where(.pagina-sorteio) .proximos .linha > .acumulado:not(.major, .minor, .mini) .star-acumulado { padding-top: .9vw; }
}
@media (prefers-reduced-motion: reduce) {
:where(.pagina-sorteio) .proximos .linha > .acumulado:not(.major, .minor, .mini) .star-acumulado { animation: none; }
}
/* Celular durante o sorteio: a barra da próxima partida fica fixa no rodapé; ao expandir, abre para cima. */
@media (orientation: portrait), (max-width: 1024px) {
:where(.pagina-sorteio) :is(#app-kit-sorteio, #app-player) > .proxima-partida {
position: fixed;
left: 2vw;
right: 2vw;
bottom: calc(2vw + env(safe-area-inset-bottom, 0px));
z-index: 1030;
margin: 0;
max-height: calc(100dvh - 24vw);
overflow-y: auto;
overscroll-behavior: contain;
background: linear-gradient(to bottom, var(--second-color), var(--third-color));
box-shadow: 0 -8px 28px rgba(0, 0, 0, .5);
}
/* Espaço no fim da página para a barra não cobrir as últimas cartelas. */
:where(.pagina-sorteio) :is(#app-kit-sorteio, #app-player):has(> .proxima-partida) { padding-bottom: 28vw; }
/* Abre para cima, então a seta do botão fica invertida. */
:where(.pagina-sorteio) :is(#app-kit-sorteio, #app-player) > .proxima-partida .proxima-partida-toggle .material-icons { transform: rotate(180deg); }
}
/* Sem partidas agendadas: aviso num card com as cores do tema. */
:where(.pagina-sorteio) .no-rounds { box-sizing: border-box; padding: 24px 16px; }
:where(.pagina-sorteio) .no-rounds-card {
box-sizing: border-box;
width: min(100%, 520px);
padding: 40px 32px 36px;
border: 2px solid var(--first-color);
border-radius: 20px;
background: linear-gradient(to bottom, var(--second-color), var(--third-color));
box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
color: var(--first-color);
text-align: center;
}
:where(.pagina-sorteio) .no-rounds-icone {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 84px;
height: 84px;
margin-bottom: 22px;
border-radius: 50%;
background: linear-gradient(to bottom, var(--twelfth-color), var(--eleventh-color));
box-shadow: 0 0 0 6px rgba(255, 255, 255, .08);
}
:where(.pagina-sorteio) .no-rounds-icone .material-icons { font-size: 44px; color: var(--first-color); }
/* Onda saindo do ícone, devagar. */
:where(.pagina-sorteio) .no-rounds-icone::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid var(--twelfth-color);
animation: no-rounds-onda 2.8s ease-out infinite;
}
@keyframes no-rounds-onda {
0% { transform: scale(1); opacity: .7; }
70%, 100% { transform: scale(1.6); opacity: 0; }
}
:where(.pagina-sorteio) .no-rounds-card h2 {
margin: 0 0 10px;
color: var(--first-color);
font-size: 26px;
font-weight: 700;
line-height: 1.25;
}
:where(.pagina-sorteio) .no-rounds-card p {
margin: 0;
color: var(--fifteenth-color);
font-size: 17px;
line-height: 1.4;
}
@media (max-width: 420px) {
:where(.pagina-sorteio) .no-rounds-card { padding: 32px 22px 28px; border-radius: 16px; }
:where(.pagina-sorteio) .no-rounds-icone { width: 72px; height: 72px; margin-bottom: 18px; }
:where(.pagina-sorteio) .no-rounds-icone .material-icons { font-size: 38px; }
:where(.pagina-sorteio) .no-rounds-card h2 { font-size: 22px; }
:where(.pagina-sorteio) .no-rounds-card p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
:where(.pagina-sorteio) .no-rounds-icone::after { animation: none; opacity: 0; }
}
/* Desktop durante o sorteio: a próxima partida vira um card reduzido flutuando no canto inferior direito, com a
largura do vídeo independente e, como no celular, abrindo para cima. */
@media (orientation: landscape) and (min-width: 1025px) {
:where(.pagina-sorteio) :is(#app-kit-sorteio, #app-player) > .proxima-partida {
--proxima-partida-fundo: 16px;
position: fixed;
right: 16px;
bottom: var(--proxima-partida-fundo);
z-index: 1030;
width: 320px;
margin: 0;
padding: 14px;
max-height: calc(100vh - var(--proxima-partida-fundo) - 88px);
overflow-y: auto;
overscroll-behavior: contain;
box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
}
/* Com o vídeo independente no canto, o card fica logo acima dele (barra de 28px + vídeo 16:9 de 320px). */
:where(.pagina-sorteio) :is(#app-kit-sorteio, #app-player):has(.video-moldura.moldura-compacta) > .proxima-partida { --proxima-partida-fundo: calc(16px + 28px + 180px + 12px); }
:where(.pagina-sorteio) :is(#app-kit-sorteio, #app-player):has(.video-moldura.moldura-compacta.video-minimizado) > .proxima-partida { --proxima-partida-fundo: calc(16px + 28px + 12px); }
:where(.pagina-sorteio) :is(#app-kit-sorteio, #app-player) > .proxima-partida .proxima-partida-toggle .material-icons { transform: rotate(180deg); }
/* Card estreito: os controles quebram linha como no celular pequeno. */
:where(.pagina-sorteio) .proxima-partida-controles{ flex-wrap: wrap; gap: 8px; }
:where(.pagina-sorteio) .proxima-partida-info{ gap: 8px; }
:where(.pagina-sorteio) .proxima-partida-info dd{ font-size: 12px; }
}
/* Card de compra e barra de cartelas compradas no desktop: cartões brancos como o quadro de informações da
espera, atalhos e contador maiores, total rotulado e COMPRAR em destaque. O celular tem a versão dele logo depois. */
:where(.pagina-sorteio) .cartelas-compradas .compradas-item{ display: inline; }
:where(.pagina-sorteio) .cartelas-compradas :is(b, i){ font: inherit; }
:where(.pagina-sorteio) #comprar .rotulo-total{ display: none; }
@media (orientation: landscape) and (min-width: 1025px) {
:where(.pagina-sorteio) .coluna-direita #comprar{
display: grid;
grid-template-columns: 1fr 12.5vw;
gap: 0.7vw;
height: auto;
margin-bottom: 0.6vw;
padding: 0.7vw;
border-radius: 0.8vw;
background: var(--first-color);
box-shadow: 0 0.3vw 1vw rgba(0, 0, 0, .25);
overflow: visible;
}
:where(.pagina-sorteio) .coluna-direita #comprar :is(.div-esq, .div-dir, .div-100, .div-100r){
float: none;
width: auto;
height: auto;
}
:where(.pagina-sorteio) .coluna-direita #comprar .div-esq{ display: flex; flex-direction: column; gap: 0.5vw; min-width: 0; }
:where(.pagina-sorteio) .coluna-direita #comprar .div-100{ display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.35vw; }
:where(.pagina-sorteio) .coluna-direita #comprar .qtd-bt{
width: auto;
height: 2.3vw;
margin: 0;
border: 0;
border-radius: 0.6vw;
background: color-mix(in srgb, var(--seventeenth-color) 12%, var(--first-color));
color: var(--seventeenth-color);
font-size: 1.05vw;
line-height: 2.3vw;
transition: background-color .15s, color .15s, transform .15s;
}
:where(.pagina-sorteio) .coluna-direita #comprar .qtd-bt:hover{ background: var(--seventeenth-color); color: var(--first-color); transform: translateY(-0.1vw); }
:where(.pagina-sorteio) .coluna-direita #comprar .div-100r{
display: flex;
gap: 0.5vw;
height: 2.6vw;
border-radius: 0;
background: none;
overflow: visible;
}
:where(.pagina-sorteio) .coluna-direita #comprar .quadro-qtd{
display: flex;
flex: 0 0 47%;
height: 100%;
padding: 0;
border: 0.12vw solid color-mix(in srgb, var(--seventeenth-color) 30%, var(--first-color));
border-radius: 0.6vw;
overflow: hidden;
}
:where(.pagina-sorteio) .coluna-direita #comprar .bt-menos-mais{
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 2.6vw;
width: auto;
height: 100%;
border-radius: 0;
background: color-mix(in srgb, var(--seventeenth-color) 12%, var(--first-color));
color: var(--seventeenth-color);
font-size: 0;
transition: background-color .15s, color .15s;
}
:where(.pagina-sorteio) .coluna-direita #comprar .bt-menos-mais::before{ font-family: "Material Icons"; font-size: 1.5vw; line-height: 1; }
:where(.pagina-sorteio) .coluna-direita #comprar .qtd-bt-menos::before{ content: "remove"; }
:where(.pagina-sorteio) .coluna-direita #comprar .qtd-bt-mais::before{ content: "add"; }
:where(.pagina-sorteio) .coluna-direita #comprar .bt-menos-mais:hover{ background: var(--seventeenth-color); color: var(--first-color); }
:where(.pagina-sorteio) .coluna-direita #comprar .input-qtd{ flex: 1; width: auto; height: 100%; }
:where(.pagina-sorteio) .coluna-direita #comprar :is(.input-qtd, .input-valor) input{
height: 100%;
border: 0;
background: transparent;
color: var(--third-color);
-webkit-text-fill-color: var(--third-color);
opacity: 1;
font-size: 1.35vw;
}
:where(.pagina-sorteio) .coluna-direita #comprar .input-valor{
display: flex;
align-items: center;
gap: 0.5vw;
flex: 1;
float: none;
min-width: 0;
width: auto;
height: 100%;
padding: 0 0.8vw;
border-radius: 0.6vw;
background: color-mix(in srgb, var(--third-color) 6%, var(--first-color));
}
:where(.pagina-sorteio) .coluna-direita #comprar .rotulo-total{
display: block;
color: var(--nineteenth-color);
font-size: max(0.8vw, 11px);
text-transform: uppercase;
letter-spacing: 0.04em;
}
:where(.pagina-sorteio) .coluna-direita #comprar .input-valor input{
position: static;
flex: 1;
min-width: 0;
width: 0;
border-radius: 0;
text-align: right;
}
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar{
display: flex;
align-items: center;
justify-content: center;
gap: 0.5vw;
height: 100%;
border-radius: 0.7vw;
background: linear-gradient(to bottom, var(--twelfth-color), var(--eleventh-color));
color: var(--first-color);
font-size: 1.6vw;
letter-spacing: 0.03em;
box-shadow: 0 0.25vw 0 color-mix(in srgb, var(--eleventh-color) 55%, #000);
transition: filter .15s, transform .1s, box-shadow .1s;
}
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar::before{
content: "shopping_cart";
font-family: "Material Icons";
font-size: 1.8vw;
font-weight: normal;
line-height: 1;
letter-spacing: normal;
}
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar:hover{ filter: brightness(1.08); }
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar:active{ transform: translateY(0.2vw); box-shadow: 0 0.05vw 0 color-mix(in srgb, var(--eleventh-color) 55%, #000); }
:where(.pagina-sorteio) .coluna-direita #comprar :is(.qtd-bt, .bt-menos-mais, .bt-comprar):focus-visible{ outline: 0.15vw solid var(--sixteenth-color); outline-offset: 0.1vw; }
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas{
display: flex;
align-items: center;
gap: 1vw;
height: auto;
min-height: 3vw;
margin-bottom: 0.6vw;
padding: 0.35vw 0.5vw 0.35vw 1vw;
border-radius: 0.8vw;
background: var(--first-color);
box-shadow: 0 0.3vw 1vw rgba(0, 0, 0, .25);
box-sizing: border-box;
color: var(--third-color);
font-size: 1.35vw;
line-height: 1.2;
text-align: left;
}
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .compradas-item{ display: flex; align-items: baseline; gap: 0.45vw; white-space: nowrap; }
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .compradas-item b{
color: var(--nineteenth-color);
font-size: max(0.8vw, 11px);
text-transform: uppercase;
letter-spacing: 0.04em;
}
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .compradas-item span{ color: var(--eleventh-color); }
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .compradas-sep{
align-self: stretch;
width: 0.1vw;
margin: 0.35vw 0;
overflow: hidden;
background: color-mix(in srgb, var(--third-color) 15%, transparent);
color: transparent;
}
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .bt-zoom{
position: static;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 2.3vw;
height: 2.3vw;
margin: 0;
border-radius: 50%;
background: color-mix(in srgb, var(--seventeenth-color) 12%, var(--first-color));
cursor: pointer;
transition: background-color .15s;
}
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .zoom-menos{ margin-left: auto; }
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .bt-zoom:hover{ background: color-mix(in srgb, var(--seventeenth-color) 25%, var(--first-color)); }
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .bt-zoom img{ width: 1.2vw; margin: 0; }
/* O card de compra ficou mais alto: a área das cartelas encolhe o mesmo tanto para a coluna não crescer. */
:where(.pagina-sorteio) .coluna-direita.compra-aberta .bilhete-melhores-cartelas{ height: 30.8vw; }
/* Lista de melhores minimizada: as cartelas ocupam o espaço que ela liberou (19vw + 21.4vw - 2vw). */
:where(.pagina-sorteio) .coluna-direita.compra-fechada.hide-lista .bilhete-melhores-cartelas{ height: 38.4vw; }
}
/* Celular e tablet: o mesmo card de compra e barra de cartelas compradas do desktop, em px; sem largura para o
COMPRAR ao lado, ele desce para uma linha própria. */
@media (orientation: portrait), (max-width: 1024px) {
:where(.pagina-sorteio) .coluna-direita #comprar{
display: grid;
grid-template-columns: 1fr;
gap: 8px;
height: auto;
margin-bottom: 8px;
padding: 10px;
border-radius: 14px;
background: var(--first-color);
box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
overflow: visible;
}
:where(.pagina-sorteio) .coluna-direita #comprar :is(.div-esq, .div-dir, .div-100, .div-100r){
float: none;
width: auto;
height: auto;
}
:where(.pagina-sorteio) .coluna-direita #comprar .div-esq{ display: flex; flex-direction: column; gap: 8px; min-width: 0; }
:where(.pagina-sorteio) .coluna-direita #comprar .div-100{ display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
:where(.pagina-sorteio) .coluna-direita #comprar .qtd-bt{
width: auto;
height: 36px;
margin: 0;
border: 0;
border-radius: 9px;
background: color-mix(in srgb, var(--seventeenth-color) 12%, var(--first-color));
color: var(--seventeenth-color);
font-size: 14px;
line-height: 36px;
transition: background-color .15s, color .15s;
}
:where(.pagina-sorteio) .coluna-direita #comprar .qtd-bt:active{ background: var(--seventeenth-color); color: var(--first-color); }
:where(.pagina-sorteio) .coluna-direita #comprar .div-100r{
display: flex;
gap: 8px;
height: 44px;
border-radius: 0;
background: none;
overflow: visible;
}
:where(.pagina-sorteio) .coluna-direita #comprar .quadro-qtd{
display: flex;
flex: 0 0 47%;
height: 100%;
padding: 0;
border: 1.5px solid color-mix(in srgb, var(--seventeenth-color) 30%, var(--first-color));
border-radius: 10px;
overflow: hidden;
}
:where(.pagina-sorteio) .coluna-direita #comprar .bt-menos-mais{
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
width: auto;
height: 100%;
border-radius: 0;
background: color-mix(in srgb, var(--seventeenth-color) 12%, var(--first-color));
color: var(--seventeenth-color);
font-size: 0;
transition: background-color .15s, color .15s;
}
:where(.pagina-sorteio) .coluna-direita #comprar .bt-menos-mais::before{ font-family: "Material Icons"; font-size: 22px; line-height: 1; }
:where(.pagina-sorteio) .coluna-direita #comprar .qtd-bt-menos::before{ content: "remove"; }
:where(.pagina-sorteio) .coluna-direita #comprar .qtd-bt-mais::before{ content: "add"; }
:where(.pagina-sorteio) .coluna-direita #comprar .bt-menos-mais:active{ background: var(--seventeenth-color); color: var(--first-color); }
:where(.pagina-sorteio) .coluna-direita #comprar .input-qtd{ flex: 1; width: auto; height: 100%; }
:where(.pagina-sorteio) .coluna-direita #comprar :is(.input-qtd, .input-valor) input{
height: 100%;
border: 0;
background: transparent;
color: var(--third-color);
-webkit-text-fill-color: var(--third-color);
opacity: 1;
font-size: 18px;
}
:where(.pagina-sorteio) .coluna-direita #comprar .input-valor{
display: flex;
align-items: center;
gap: 6px;
flex: 1;
float: none;
min-width: 0;
width: auto;
height: 100%;
padding: 0 12px;
border-radius: 10px;
background: color-mix(in srgb, var(--third-color) 6%, var(--first-color));
}
:where(.pagina-sorteio) .coluna-direita #comprar .rotulo-total{
display: block;
color: var(--nineteenth-color);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
:where(.pagina-sorteio) .coluna-direita #comprar .input-valor input{
position: static;
flex: 1;
min-width: 0;
width: 0;
border-radius: 0;
text-align: right;
}
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar{
position: static;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 48px;
border-radius: 12px;
background: linear-gradient(to bottom, var(--twelfth-color), var(--eleventh-color));
color: var(--first-color);
font-size: 18px;
line-height: 1;
letter-spacing: 0.03em;
box-shadow: 0 3px 0 color-mix(in srgb, var(--eleventh-color) 55%, #000);
transition: filter .15s, transform .1s, box-shadow .1s;
}
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar::before{
content: "shopping_cart";
font-family: "Material Icons";
font-size: 22px;
font-weight: normal;
line-height: 1;
letter-spacing: normal;
}
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar:active{ transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--eleventh-color) 55%, #000); }
:where(.pagina-sorteio) .coluna-direita #comprar :is(.qtd-bt, .bt-menos-mais, .bt-comprar):focus-visible{ outline: 2px solid var(--sixteenth-color); outline-offset: 1px; }
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas{
display: flex;
align-items: center;
gap: 12px;
height: auto;
min-height: 48px;
margin-bottom: 8px;
padding: 6px 8px 6px 14px;
border-radius: 14px;
background: var(--first-color);
box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
box-sizing: border-box;
color: var(--third-color);
font-size: 16px;
line-height: 1.2;
text-align: left;
}
/* Rótulo em cima do valor: um saldo grande não empurra os botões de zoom para fora da barra. */
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .compradas-item{ display: flex; flex-direction: column; gap: 2px; min-width: 0; white-space: nowrap; }
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .compradas-item b{
color: var(--nineteenth-color);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .compradas-item span{ overflow: hidden; text-overflow: ellipsis; color: var(--eleventh-color); }
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .compradas-sep{
align-self: stretch;
width: 1px;
margin: 6px 0;
overflow: hidden;
background: color-mix(in srgb, var(--third-color) 15%, transparent);
color: transparent;
}
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .bt-zoom{
position: static;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
height: 36px;
margin: 0;
border-radius: 50%;
background: color-mix(in srgb, var(--seventeenth-color) 12%, var(--first-color));
cursor: pointer;
}
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .zoom-menos{ margin-left: auto; }
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .bt-zoom img{ width: 18px; margin: 0; }
}
/* Cabeçalho da lista de melhores cartelas: rótulos discretos sobre as colunas, fica visível ao rolar a lista, tem a
mesma altura aberta ou minimizada e a barra inteira alterna a lista (o botão redondo é o indicador e o foco). */
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .topo{
position: sticky;
top: 0;
z-index: 1;
align-items: center;
padding: 0;
background: var(--fifth-color);
color: var(--fifteenth-color);
font-weight: 600;
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
user-select: none;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .topo :is(.cupom, .doador, .faltam){ padding-top: 0; }
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .topo .button{
position: absolute;
top: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 50%;
background: color-mix(in srgb, var(--fifteenth-color) 16%, transparent);
color: var(--first-color);
line-height: 1;
transform: translateY(-50%);
cursor: pointer;
transition: background-color .15s;
}
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .topo:hover .button{ background: color-mix(in srgb, var(--fifteenth-color) 30%, transparent); }
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .topo .button:focus-visible{ outline: 2px solid var(--sixteenth-color); outline-offset: 1px; }
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .topo .button .material-icons{ font-size: inherit; line-height: 1; }
@media (orientation: landscape) and (min-width: 1025px) {
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .topo{ height: 2vw; font-size: max(0.8vw, 11px); }
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .topo .button{ right: 0.3vw; width: 1.5vw; height: 1.5vw; font-size: 1.3vw; }
}
@media (orientation: portrait), (max-width: 1024px) {
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .topo{ height: 36px; font-size: 11px; line-height: 1; letter-spacing: 0.03em; }
/* FALTAM centralizado no espaço à esquerda do botão; border-box mantém a coluna alinhada às linhas. */
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .topo .faltam{ box-sizing: border-box; padding-right: 30px; }
:where(.pagina-sorteio) .coluna-direita.hide-lista .lista-melhores-cartelas,
:where(.pagina-sorteio) .coluna-direita.hide-lista .lista-melhores-cartelas .topo{ height: 36px !important; line-height: 1; }
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .topo .button{ right: 4px; width: 28px; height: 28px; font-size: 22px; }
}
/* Tela de sorteio só com as cores do tema: bilhetes da lista, casas vazias do "faltam" e o botão de som ligado
usavam vermelho, cinza e oliva fixos. */
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .corpo .cupom{ color: var(--seventeenth-color); }
:where(.pagina-sorteio) .coluna-direita .lista-melhores-cartelas .corpo .faltam .nulo{ background: color-mix(in srgb, var(--fifteenth-color) 50%, var(--first-color)); }
:where(.pagina-sorteio) .pipoqueira-som[aria-pressed="true"]{ color: var(--first-color); background: var(--seventeenth-color); border-color: var(--eleventh-color); }
:where(.pagina-sorteio) .pipoqueira-som[aria-pressed="true"]:hover{ background: var(--eleventh-color); }
/* Cartelas compradas: planas, numa grade com linhas finas nas cores do tema (celular e computador).
As variáveis dão a altura das linhas em cada nível da lupa; no computador, medidas menores logo abaixo. */
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela{
--cartela-linha: color-mix(in srgb, var(--fifteenth-color) 75%, var(--seventeenth-color));
--cartela-altura: 4.4vw;
--cartela-fonte: 3.8vw;
--cartela-topo: 5vw;
--cartela-topo-fonte: 3.4vw;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1px;
padding: 0;
border: 0;
border-radius: 2vw;
overflow: hidden;
background: var(--cartela-linha);
box-shadow: none;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas.zoom-cartela-1 .cartela{
--cartela-altura: 7vw; --cartela-fonte: 5.6vw; --cartela-topo: 7vw; --cartela-topo-fonte: 4.6vw;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas.zoom-cartela-2 .cartela{
--cartela-altura: 3.6vw; --cartela-fonte: 2.9vw; --cartela-topo: 4.2vw; --cartela-topo-fonte: 2.6vw;
border-radius: 1.4vw;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela .doador{
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
gap: 1vw;
height: var(--cartela-topo);
margin: 0;
border-radius: 0;
background: var(--third-color);
color: var(--first-color);
font-size: var(--cartela-topo-fonte);
line-height: 1;
letter-spacing: .06em;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela .doador::before{
content: "confirmation_number";
font-family: "Material Icons";
font-size: 1.15em;
font-weight: normal;
letter-spacing: normal;
color: var(--fifteenth-color);
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela .numero{
float: none;
width: auto !important;
height: var(--cartela-altura);
margin: 0 !important;
border-radius: 0;
background: var(--first-color);
color: var(--fifth-color);
font-size: var(--cartela-fonte);
line-height: var(--cartela-altura);
box-shadow: none;
}
/* Casa livre (trevo) no centro das cartelas de 25. */
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela-25 .numero:nth-child(14){
background: color-mix(in srgb, var(--fifteenth-color) 45%, var(--first-color));
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela .sorteado{ background: var(--seventeenth-color) !important; color: var(--first-color); }
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela .ultimo{ color: var(--first-color); }
@media (orientation: landscape) and (min-width: 1025px) {
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela{
--cartela-altura: 2.1vw; --cartela-fonte: 1.5vw; --cartela-topo: 2vw; --cartela-topo-fonte: 1.2vw;
border-radius: .7vw;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas.zoom-cartela-1 .cartela{
--cartela-altura: 2.8vw; --cartela-fonte: 1.9vw; --cartela-topo: 2.6vw; --cartela-topo-fonte: 1.6vw;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas.zoom-cartela-2 .cartela{
--cartela-altura: 1.6vw; --cartela-fonte: 1.1vw; --cartela-topo: 1.7vw; --cartela-topo-fonte: .95vw;
border-radius: .5vw;
}
:where(.pagina-sorteio) .coluna-direita .bilhete-melhores-cartelas .cartela .doador{ gap: .4vw; }
}
/* Celular: card de compra em duas linhas — atalhos em cima; quantidade, total e COMPRAR lado a lado embaixo. */
@media (orientation: portrait), (max-width: 1024px) {
:where(.pagina-sorteio) .coluna-direita #comprar{
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "atalhos atalhos" "quantidade comprar";
column-gap: 6px;
}
:where(.pagina-sorteio) .coluna-direita #comprar .div-esq{ display: contents; }
:where(.pagina-sorteio) .coluna-direita #comprar .div-100{ grid-area: atalhos; }
:where(.pagina-sorteio) .coluna-direita #comprar .div-100r{ grid-area: quantidade; gap: 6px; height: 46px; min-width: 0; }
:where(.pagina-sorteio) .coluna-direita #comprar .div-dir{ grid-area: comprar; }
:where(.pagina-sorteio) .coluna-direita #comprar .quadro-qtd{ flex: 0 0 108px; }
:where(.pagina-sorteio) .coluna-direita #comprar .bt-menos-mais{ flex-basis: 34px; }
/* Sem largura para o rótulo ao lado, "Total" fica em cima do valor. */
:where(.pagina-sorteio) .coluna-direita #comprar .input-valor{
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 2px;
padding: 0 10px;
}
:where(.pagina-sorteio) .coluna-direita #comprar .rotulo-total{ font-size: 10px; line-height: 1; }
:where(.pagina-sorteio) .coluna-direita #comprar .input-valor input{ flex: none; width: 100%; height: auto; font-size: 16px; line-height: 1.2; }
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar{ width: auto; height: 46px; padding: 0 14px; gap: 6px; font-size: 16px; }
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar::before{ font-size: 20px; }
}
/* Telas estreitas: sem o carrinho e com tudo um pouco mais justo, para o total caber inteiro. */
@media (max-width: 360px) {
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar::before{ content: none; }
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar{ padding: 0 10px; font-size: 15px; }
:where(.pagina-sorteio) .coluna-direita #comprar .quadro-qtd{ flex-basis: 96px; }
:where(.pagina-sorteio) .coluna-direita #comprar .bt-menos-mais{ flex-basis: 30px; }
:where(.pagina-sorteio) .coluna-direita #comprar .input-valor{ padding: 0 8px; }
:where(.pagina-sorteio) .coluna-direita #comprar .input-valor input{ font-size: 15px; }
}
/* Celular, espera: relógio mais perto do cabeçalho (sem as folgas do conteúdo, da coluna e da área de espera). */
@media (orientation: portrait), (max-width: 1024px) {
:where(.pagina-sorteio) main.main:has(.espera .relogio){ padding-top: 0 !important; }
:where(.pagina-sorteio) .esquerda:has(.espera .relogio),
:where(.pagina-sorteio) .espera:has(.relogio){ padding-top: 0; }
}
/* Card de compra e barra de cartelas compradas no azul vivo do tema, sem branco e cinza — botões translúcidos,
caixas escuras, COMPRAR e valores comprados em amarelo. As cores valem no desktop e no celular; sombras e
hover ficam em cada tela. */
:where(.pagina-sorteio) .coluna-direita :is(#comprar, .cartelas-compradas){ background: linear-gradient(to bottom, var(--eighth-color), var(--seventeenth-color)); }
:where(.pagina-sorteio) .coluna-direita #comprar :is(.qtd-bt, .bt-menos-mais){
background: color-mix(in srgb, var(--first-color) 14%, transparent);
color: var(--first-color);
}
:where(.pagina-sorteio) .coluna-direita #comprar .quadro-qtd{
border-color: color-mix(in srgb, var(--first-color) 22%, transparent);
background: color-mix(in srgb, var(--tenth-color) 35%, transparent);
}
:where(.pagina-sorteio) .coluna-direita #comprar :is(.input-qtd, .input-valor) input{ color: var(--first-color); -webkit-text-fill-color: var(--first-color); }
:where(.pagina-sorteio) .coluna-direita #comprar .input-valor{ background: color-mix(in srgb, var(--tenth-color) 35%, transparent); }
:where(.pagina-sorteio) .coluna-direita #comprar .rotulo-total{ color: var(--fifteenth-color); }
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar{ background: var(--sixteenth-color); color: var(--third-color); }
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar:focus-visible{ outline-color: var(--first-color); }
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas{ color: var(--first-color); }
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .compradas-item b{ color: var(--fifteenth-color); }
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .compradas-item span{ color: var(--sixteenth-color); }
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .compradas-sep{ background: color-mix(in srgb, var(--first-color) 20%, transparent); }
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .bt-zoom{ background: color-mix(in srgb, var(--first-color) 14%, transparent); }
/* As lupas são PNG pretas: ficam brancas no fundo azul. */
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .bt-zoom img{ filter: brightness(0) invert(1); }
@media (orientation: landscape) and (min-width: 1025px) {
:where(.pagina-sorteio) .coluna-direita :is(#comprar, .cartelas-compradas){ box-shadow: 0 0.3vw 1vw rgba(0, 0, 0, .35); }
:where(.pagina-sorteio) .coluna-direita #comprar :is(.qtd-bt, .bt-menos-mais):hover,
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas .bt-zoom:hover{ background: color-mix(in srgb, var(--first-color) 30%, transparent); color: var(--first-color); }
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar{ box-shadow: 0 0.25vw 0 color-mix(in srgb, var(--third-color) 70%, transparent); }
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar:active{ box-shadow: 0 0.05vw 0 color-mix(in srgb, var(--third-color) 70%, transparent); }
}
@media (orientation: portrait), (max-width: 1024px) {
:where(.pagina-sorteio) .coluna-direita :is(#comprar, .cartelas-compradas){ box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
:where(.pagina-sorteio) .coluna-direita #comprar :is(.qtd-bt, .bt-menos-mais):active{ background: color-mix(in srgb, var(--first-color) 30%, transparent); }
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar{ box-shadow: 0 3px 0 color-mix(in srgb, var(--third-color) 70%, transparent); }
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar:active{ box-shadow: 0 1px 0 color-mix(in srgb, var(--third-color) 70%, transparent); }
}
/* Faixa de informações da espera (sorteio, doação, hora) no branco, com visual moderno: cantos arredondados,
sombra suave, rótulos pequenos em caixa alta e valores em negrito no azul do tema, divisórias finas. */
:where(.pagina-sorteio) .proximos .linha:first-child{
background: #fff;
border-radius: 0.8vw;
box-shadow: 0 0.3vw 1vw rgba(0, 0, 0, .25);
padding: 0.6vw 0;
}
:where(.pagina-sorteio) .proximos .linha:first-child .info .label{
color: #6b7a90;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
:where(.pagina-sorteio) .proximos .linha:first-child .info .value{
color: var(--eleventh-color);
font-weight: 800;
}
:where(.pagina-sorteio) .proximos .linha:first-child .box:not(:last-child){ border-right-color: #e3e8f0; }
@media (orientation: portrait), (max-width: 1024px) {
:where(.pagina-sorteio) .proximos .linha:first-child{
border-radius: 12px;
box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
padding: 8px 0;
}
}
/* Card de compra: atalho escolhido marcado, quantidade digitável (teclado numérico) e COMPRAR pulsando depois de
um atalho, para mostrar que o atalho só escolheu a quantidade e a compra é no botão. */
:where(.pagina-sorteio) .coluna-direita #comprar .qtd-bt.ativo{ background: var(--sixteenth-color); color: var(--third-color); }
:where(.pagina-sorteio) .coluna-direita #comprar .bt-menos-mais{ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
:where(.pagina-sorteio) .coluna-direita #comprar .input-qtd input{ outline: none; font-weight: 600; cursor: text; }
:where(.pagina-sorteio) .coluna-direita #comprar .input-qtd input::placeholder{ color: var(--first-color); opacity: .45; }
:where(.pagina-sorteio) .coluna-direita #comprar .quadro-qtd{ transition: border-color .15s, box-shadow .15s; }
:where(.pagina-sorteio) .coluna-direita #comprar .quadro-qtd:focus-within{
border-color: var(--sixteenth-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--sixteenth-color) 30%, transparent);
}
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar.destaque{ position: relative; inset: auto; animation: comprar-destaque .7s ease-out 3; }
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar.destaque::after{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
animation: comprar-destaque-anel .7s ease-out 3;
}
@keyframes comprar-destaque{
0%, 100% { transform: scale(1); filter: brightness(1); }
35% { transform: scale(1.06); filter: brightness(1.18); }
}
@keyframes comprar-destaque-anel{
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sixteenth-color) 80%, transparent); }
100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--sixteenth-color) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar.destaque{ animation: none; filter: brightness(1.15); }
:where(.pagina-sorteio) .coluna-direita #comprar .bt-comprar.destaque::after{ animation: none; box-shadow: 0 0 0 3px var(--sixteenth-color); }
}
/* Balão da próxima partida durante o sorteio com o visual do descanso no celular: faixa branca de informações como
a da espera e o card azul de compra — atalhos em cima; quantidade, total e COMPRAR lado a lado embaixo. Vale para
o celular e o desktop (onde o balão tem a largura da coluna da direita), sempre nos tamanhos do celular. */
:where(.pagina-sorteio) .proxima-partida-info{
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin: 0 0 10px;
padding: 8px 0;
border-radius: 12px;
background: #fff;
box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
text-align: center;
}
:where(.pagina-sorteio) .proxima-partida-info > div{ min-width: 0; padding: 0 6px; }
:where(.pagina-sorteio) .proxima-partida-info > div:not(:last-child){ border-right: 1px solid #e3e8f0; }
:where(.pagina-sorteio) .proxima-partida-info dt{ color: #6b7a90; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
:where(.pagina-sorteio) .proxima-partida-info dd{ margin: 2px 0 0; color: var(--eleventh-color); font-size: 13px; font-weight: 800; white-space: nowrap; }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-compra{
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
padding: 10px;
border: 0;
border-radius: 14px;
background: linear-gradient(to bottom, var(--eighth-color), var(--seventeenth-color));
box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
:where(.pagina-sorteio) .proxima-partida .proxima-partida-compra :is(button, input, strong){ font-family: myriad, Roboto, sans-serif; }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-atalhos{ display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-atalhos button{
min-width: 0;
min-height: 0;
height: 36px;
padding: 0;
border: 0;
border-radius: 9px;
background: color-mix(in srgb, var(--first-color) 14%, transparent);
color: var(--first-color);
font-size: 14px;
transition: background-color .15s, color .15s;
}
:where(.pagina-sorteio) .proxima-partida .proxima-partida-atalhos button[aria-pressed="true"]{ background: var(--sixteenth-color); color: var(--third-color); }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-controles{ display: flex; flex-wrap: nowrap; align-items: stretch; gap: 6px; height: 46px; }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-quantidade{
display: flex;
flex: 0 0 108px;
gap: 0;
height: 100%;
box-sizing: border-box;
border: 1.5px solid color-mix(in srgb, var(--first-color) 22%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--tenth-color) 35%, transparent);
overflow: hidden;
transition: border-color .15s, box-shadow .15s;
}
:where(.pagina-sorteio) .proxima-partida .proxima-partida-quantidade:focus-within{
border-color: var(--sixteenth-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--sixteenth-color) 30%, transparent);
}
:where(.pagina-sorteio) .proxima-partida .proxima-partida-quantidade button{
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 34px;
min-width: 0;
min-height: 0;
height: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: color-mix(in srgb, var(--first-color) 14%, transparent);
color: var(--first-color);
-webkit-user-select: none;
user-select: none;
touch-action: manipulation;
transition: background-color .15s, color .15s;
}
:where(.pagina-sorteio) .proxima-partida .proxima-partida-quantidade button .material-icons{ font-size: 22px; line-height: 1; }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-quantidade input{
flex: 1;
min-width: 0;
width: auto;
min-height: 0;
height: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--first-color);
font-size: 18px;
font-weight: 600;
outline: none;
}
:where(.pagina-sorteio) .proxima-partida .proxima-partida-total{
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 2px;
flex: 1;
min-width: 0;
margin: 0;
padding: 0 10px;
border-radius: 10px;
background: color-mix(in srgb, var(--tenth-color) 35%, transparent);
}
:where(.pagina-sorteio) .proxima-partida .proxima-partida-total span{ color: var(--fifteenth-color); font-size: 10px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-total strong{ max-width: 100%; color: var(--first-color); font-size: 16px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-compra p{ margin: 0; font-size: 12px; color: var(--sixteenth-color); }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-comprar{
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
flex: 0 0 auto;
width: auto;
height: 100%;
min-height: 0;
margin: 0;
padding: 0 14px;
border: 0;
border-radius: 12px;
background: var(--sixteenth-color);
color: var(--third-color);
font-size: 16px;
font-weight: 700;
line-height: 1;
letter-spacing: .03em;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 3px 0 color-mix(in srgb, var(--third-color) 70%, transparent);
transition: filter .15s, transform .1s, box-shadow .1s;
}
:where(.pagina-sorteio) .proxima-partida .proxima-partida-comprar .material-icons{ font-size: 20px; line-height: 1; }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-comprar:focus-visible{ outline-color: var(--first-color); }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-comprar:hover:not(:disabled){ background: var(--sixteenth-color); filter: brightness(1.08); }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-comprar:active:not(:disabled){ transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--third-color) 70%, transparent); }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-compra :is(.proxima-partida-atalhos, .proxima-partida-quantidade) button:hover:not(:disabled){ background: color-mix(in srgb, var(--first-color) 30%, transparent); }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-atalhos button[aria-pressed="true"]:hover:not(:disabled){ background: var(--sixteenth-color); }
/* Depois de um atalho, o COMPRAR pulsa como no descanso, para mostrar que a compra é no botão. */
:where(.pagina-sorteio) .proxima-partida .proxima-partida-comprar.destaque{ animation: comprar-destaque .7s ease-out 3; }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-comprar.destaque::after{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
animation: comprar-destaque-anel .7s ease-out 3;
}
@media (prefers-reduced-motion: reduce) {
:where(.pagina-sorteio) .proxima-partida .proxima-partida-comprar.destaque{ animation: none; filter: brightness(1.15); }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-comprar.destaque::after{ animation: none; box-shadow: 0 0 0 3px var(--sixteenth-color); }
}
/* Telas estreitas: sem o carrinho e com tudo um pouco mais justo, como no descanso. */
@media (max-width: 360px) {
:where(.pagina-sorteio) .proxima-partida .proxima-partida-comprar .material-icons{ display: none; }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-comprar{ padding: 0 10px; font-size: 15px; }
:where(.pagina-sorteio) .proxima-partida .proxima-partida-quantidade{ flex-basis: 96px; }
}
/* Desktop: o balão tem a largura da coluna da direita (40% da tela menos o respiro de 1% de cada lado) e o mesmo
respiro interno do celular, no lugar do card estreito de 320px. */
@media (orientation: landscape) and (min-width: 1025px) {
:where(.pagina-sorteio) :is(#app-kit-sorteio, #app-player) > .proxima-partida{ right: 1%; width: 38%; padding: 18px; }
:where(.pagina-sorteio) :is(#app-kit-sorteio, #app-player) > .proxima-partida.minimizada{ padding: 10px 18px; }
}
/* "CARTELA PREMIADA" (prêmio da roleta) é mais comprido que os outros prêmios: fica numa linha só,
com espaço reservado para a miniroleta logo depois do nome, e o valor só com o espaço que precisa. */
:where(.pagina-sorteio) .proximos .premio.premio-roleta .label{
max-width: none;
white-space: nowrap;
margin-right: 4.5vw;
}
:where(.pagina-sorteio) .proximos .premio.premio-roleta .value{
width: auto;
flex-shrink: 0;
}
@media (orientation: portrait), (max-width: 1024px) {
:where(.pagina-sorteio) .proximos .premio.premio-roleta .label{
margin-right: 8vw;
}
}
/* Na janela da cartela ganhadora o título segue em maiúsculas, como nos outros prêmios. */
:where(.pagina-sorteio) .roleta-final-premio .premio-destaque-cabecalho h2{
text-transform: uppercase;
}
/* Painel de números em bolinhas: cada casa vira uma bola 3D nas cores do tema e a bola da vez
(dourada) gira, cresce com brilho e dá uma quicada quando acende. A bola é o ::after (o ::before de .numero é escondido com !important mais acima), do
tamanho do menor lado da casa, para ficar redonda em qualquer largura. */
.esquerda .painel-numeros .numero,
.esquerda .painel-numeros .numero.sorteado,
.esquerda .painel-numeros .numero.ultimo {
position: relative;
z-index: 0;
background: transparent;
border-radius: 0;
container-type: size;
}
.esquerda .painel-numeros .numero::after {
content: "";
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, .45) 22%, rgba(255, 255, 255, 0) 55%),
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .35) 100%),
var(--fifteenth-color);
box-shadow: inset 0 -.1em .18em rgba(0, 0, 0, .25);
}
@supports (width: 1cqmin) {
.esquerda .painel-numeros .numero::after { width: 96cqmin; height: 96cqmin; }
}
.esquerda .painel-numeros .numero { font-weight: 700; }
.esquerda .painel-numeros .numero.sorteado::after {
background:
radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .6) 0 6%, rgba(255, 255, 255, .2) 30%, rgba(255, 255, 255, 0) 55%),
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .4) 100%),
var(--seventeenth-color);
}
.esquerda .painel-numeros .numero.ultimo {
z-index: 2;
color: #4a2500;
font-weight: 800;
animation: painel-bola-acende .9s cubic-bezier(.2, .9, .3, 1.25);
}
.esquerda .painel-numeros .numero.ultimo::after {
background: radial-gradient(circle at 34% 28%, #fff6d8 0 7%, #ffd65c 30%, #f0a91a 68%, #b87400 100%);
}
@keyframes painel-bola-acende {
0% { transform: perspective(200px) rotateY(180deg) scale(.3); filter: brightness(2.2) drop-shadow(0 0 0 rgba(255, 201, 60, .9)); }
55% { transform: perspective(200px) rotateY(0) scale(1.55); filter: brightness(1.35) drop-shadow(0 0 .6vw rgba(255, 201, 60, .85)); }
80% { transform: scale(.94); filter: none; }
100% { transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
.esquerda .painel-numeros .numero.ultimo { animation: none; }
}
@media (orientation: portrait), (max-width: 1024px) {
.esquerda .painel-numeros .numero { height: 5.2vw; }
}
/* Prêmios da espera com medalhão: o troféu fica num círculo com a cor do metal, saindo pela borda esquerda da barra,
com "1º PRÊMIO" em cima do nome do prêmio no tipo da partida e o valor numa pílula. Tudo é medido pela altura da
barra (--altura). O círculo é o ::before do rótulo e o troféu, que flutua (a roleta gira), é o ::after. */
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado) {
container-type: inline-size;
--altura: 7vw;
--medalha: calc(var(--altura) * 1.05);
--metal: #f2c440;
--metal-escuro: #6b3f02;
--metal-texto: #f2c440;
--trofeu: url("/images/trofeu-ouro.svg");
position: relative;
overflow: visible;
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--altura) * .2);
width: calc(100% - var(--medalha) * .28);
height: auto;
min-height: var(--altura);
margin-left: calc(var(--medalha) * .28);
margin-right: 0;
padding: calc(var(--altura) * .1) calc(var(--altura) * .18) calc(var(--altura) * .1) calc(var(--medalha) * .95);
color: #fff;
border-color: rgba(255, 255, 255, .9);
animation: none;
}
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado).com-acumulado { --altura: 6vw; }
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado).premio-posicao-1 {
--metal: #c9803c;
--metal-escuro: #5a2e0c;
--metal-texto: #e7a667;
--trofeu: url("/images/trofeu-bronze.svg");
}
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado).premio-posicao-2 {
--metal: #d7dde5;
--metal-escuro: #5d6672;
--metal-texto: #d7dde5;
--trofeu: url("/images/trofeu-prata.svg");
}
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado).premio-roleta {
--metal: #8b4dff;
--metal-escuro: #2a0b5c;
--metal-texto: #d9c8ff;
--trofeu: url("/images/mini-roleta.svg");
}
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado) .label {
position: static;
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 auto;
min-width: 0;
width: auto;
max-width: none;
margin: 0;
padding: 0;
height: auto;
font-size: calc(var(--altura) * .36);
line-height: 1.05;
text-align: left;
text-transform: uppercase;
white-space: normal;
}
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado) .label .premio-ordem {
display: block;
font-size: calc(var(--altura) * .2);
line-height: 1;
letter-spacing: .08em;
color: var(--metal-texto);
margin-bottom: calc(var(--altura) * .04);
}
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado) .label::before,
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado) .label::after {
content: "";
display: block !important;
position: absolute;
left: calc(var(--medalha) * -.28);
right: auto;
top: 50%;
width: var(--medalha);
height: var(--medalha);
transform: translateY(-50%);
box-sizing: border-box;
}
/* Círculo */
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado) .label::before {
z-index: 2;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #1b5bb8, #031a36 70%);
border: calc(var(--medalha) * .06) solid var(--metal);
box-shadow: 0 0 0 calc(var(--medalha) * .022) var(--metal-escuro),
0 calc(var(--medalha) * .045) calc(var(--medalha) * .09) rgba(0, 0, 0, .55),
inset 0 0 calc(var(--medalha) * .11) rgba(0, 0, 0, .6);
animation: none;
}
/* Troféu (ou roleta) */
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado) .label::after {
z-index: 3;
background: var(--trofeu) center / 62% no-repeat;
filter: drop-shadow(0 calc(var(--medalha) * .02) calc(var(--medalha) * .02) rgba(0, 0, 0, .5));
animation: premio-trofeu 3s ease-in-out infinite;
}
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado).premio-posicao-2 .label::after { animation-delay: .4s; }
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado).premio-posicao-3 .label::after { animation-delay: .8s; }
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado).premio-roleta .label::after {
background-size: 58%;
animation: premio-roleta-gira 8s linear infinite;
}
@keyframes premio-trofeu {
0%, 100% { transform: translateY(-50%) rotate(-6deg); }
50% { transform: translateY(-56%) rotate(6deg); }
}
@keyframes premio-roleta-gira {
from { transform: translateY(-50%) rotate(0deg); }
to { transform: translateY(-50%) rotate(360deg); }
}
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado) .value {
position: static;
flex: none;
width: auto;
margin: 0;
font-size: calc(var(--altura) * .38);
line-height: 1;
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
color: var(--acumulado-destaque, #ffff00);
background: rgba(0, 8, 24, .6);
border: max(1px, calc(var(--altura) * .025)) solid rgba(255, 255, 255, .18);
border-radius: 999px;
padding: calc(var(--altura) * .1) calc(var(--altura) * .24) calc(var(--altura) * .06);
}
@media (orientation: portrait), (max-width: 1024px) {
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado),
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado).com-acumulado { --altura: 14vw; --medalha: var(--altura); }
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado) .label,
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado) .value {
font-size: calc(var(--altura) * .3);
/* Mesmo tamanho em todas as barras, reduzido quando a barra é estreita para o nome mais longo
("CARTELA PREMIADA") e o valor caberem numa linha só. */
font-size: min(calc(var(--altura) * .3), calc((100cqi - var(--altura) * .8) / 15.5));
}
}
@media (prefers-reduced-motion: reduce) {
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .premio:not(.acumulado) .label::after { animation: none; }
}
/* Propagandas em tela cheia (stories) na espera. O card da próxima partida (z-index 1030) fica por cima, no rodapé;
--rodape é a altura do card medida no celular. */
.propaganda-stories {
position: fixed;
inset: 0;
z-index: 1020;
display: flex;
flex-direction: column;
gap: 10px;
padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(var(--rodape, 120px) + 12px);
background: var(--tenth-color, #010d1a);
color: #fff;
}
.propaganda-stories-barras { display: flex; gap: 4px; }
.propaganda-stories-barras i {
position: relative; flex: 1; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .25);
}
.propaganda-stories-barras i::after {
content: ""; position: absolute; inset: 0; background: var(--first-color, #fff); transform: scaleX(0); transform-origin: left;
}
.propaganda-stories-barras i.feita::after { transform: scaleX(1); }
.propaganda-stories-barras i.rodando::after { animation: propaganda-barra 5s linear forwards; }
@keyframes propaganda-barra { to { transform: scaleX(1); } }
.propaganda-stories-topo { display: flex; align-items: center; gap: 8px; }
.propaganda-stories-selo {
font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3;
color: var(--third-color, #021c33); background: var(--fifteenth-color, #b5d9ff); border-radius: 4px; padding: 2px 7px 1px;
}
.propaganda-stories-contagem { font-size: 12px; font-weight: 700; color: var(--fifteenth-color, #b5d9ff); }
.propaganda-stories-fechar {
margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 0;
background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.propaganda-stories-janela { position: relative; flex: 1; min-height: 0; border-radius: 10px; overflow: hidden; background: var(--third-color, #021c33); }
.propaganda-stories-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.propaganda-stories-slide.ativo { opacity: 1; }
.propaganda-stories-slide .fundo {
position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(16px) saturate(1.2); opacity: .6;
}
.propaganda-stories-slide .imagem { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.propaganda-stories-toque { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; border: 0; background: transparent; cursor: pointer; }
.propaganda-stories-toque.anterior { left: 0; }
.propaganda-stories-toque.proxima { right: 0; }
.propaganda-stories-dica { text-align: center; font-size: 11px; color: color-mix(in srgb, var(--fifteenth-color, #b5d9ff) 75%, transparent); }
/* No computador a propaganda vira uma janela 16:9, a maior que cabe acima do card de compra (--rodape é medido pelo JS,
então ela encolhe quando o card abre), centralizada na largura. 150px = margens + barras + topo + dica + espaços. */
@media (orientation: landscape) and (min-width: 1025px) {
.propaganda-stories {
--largura-stories: min(100vw - 64px, (100vh - var(--rodape, 0px) - 150px) * 16 / 9);
padding: 32px 32px calc(var(--rodape, 0px) + 16px);
justify-content: center;
align-items: center;
background: rgba(1, 13, 26, .92);
}
.propaganda-stories > * { width: var(--largura-stories); }
.propaganda-stories-janela { flex: none; aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
.propaganda-stories-slide { transition: none; }
.propaganda-stories-barras i.rodando::after { animation: none; transform: scaleX(1); }
}
/* Alertas (SweetAlert 1) no visual do kit: card no azul vivo do tema como o card de compra, ícone num círculo com
Material Icons no lugar dos desenhos do plugin, "Sim"/OK amarelo como o COMPRAR e "Não" translúcido.
O plugin põe cor e sombra inline no botão de confirmar (confirmButtonColor), daí os !important.
Animação só na entrada e só com transform/opacity — o pulso infinito do aviso (border-color) sai. */
.sweet-overlay{ background-color: rgba(1, 13, 26, .75); background-color: color-mix(in srgb, var(--tenth-color, #010d1a) 78%, transparent); }
.sweet-alert{
left: 0;
right: 0;
box-sizing: border-box;
width: min(400px, calc(100% - 32px));
margin-left: auto;
margin-right: auto;
padding: 28px 22px 22px;
border: 1px solid color-mix(in srgb, var(--first-color) 20%, transparent);
border-radius: 20px;
background: linear-gradient(to bottom, var(--eighth-color), var(--seventeenth-color));
box-shadow: 0 16px 48px rgba(0, 0, 0, .55);
color: var(--first-color);
font-family: Roboto, sans-serif;
}
.sweet-alert h2{
margin: 16px 0 0;
color: var(--first-color);
font-size: 21px;
font-weight: 700;
line-height: 1.3;
overflow-wrap: anywhere;
}
.sweet-alert p{
margin-top: 8px;
color: var(--fifteenth-color);
font-size: 15px;
font-weight: 400;
line-height: 1.4;
}
.sweet-alert .sa-icon:not(.sa-custom){
--sa-cor: var(--fifteenth-color);
box-sizing: border-box;
width: 72px;
height: 72px;
margin: 0 auto;
border: 3px solid var(--sa-cor);
border-radius: 50%;
background: color-mix(in srgb, var(--tenth-color) 30%, transparent);
box-shadow: 0 0 0 6px color-mix(in srgb, var(--sa-cor) 14%, transparent);
animation: sa-icone-entra .45s cubic-bezier(.2, 1.5, .4, 1) both;
}
.sweet-alert .sa-icon.sa-success{ --sa-cor: #34d27b; }
.sweet-alert .sa-icon.sa-error{ --sa-cor: #ff5d5d; }
.sweet-alert .sa-icon.sa-warning{ --sa-cor: var(--sixteenth-color); }
.sweet-alert .sa-icon.sa-info{ --sa-cor: var(--fifteenth-color); }
/* Desenhos do plugin (traços, placeholder e máscaras brancas do check) escondidos. */
.sweet-alert .sa-icon:not(.sa-custom) *{ display: none !important; }
.sweet-alert .sa-icon:not(.sa-custom)::after{ content: none; }
.sweet-alert .sa-icon:not(.sa-custom)::before{
position: absolute;
inset: 0;
width: auto;
height: auto;
margin: 0;
border-radius: 0;
background: none;
transform: none;
transform-origin: center;
color: var(--sa-cor);
font: normal 42px/66px "Material Icons";
text-align: center;
-webkit-font-feature-settings: "liga";
font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
}
.sweet-alert .sa-icon.sa-success::before{ content: "check"; }
.sweet-alert .sa-icon.sa-error::before{ content: "close"; }
.sweet-alert .sa-icon.sa-warning::before{ content: "priority_high"; }
/* "!" de cabeça para baixo vira o "i". */
.sweet-alert .sa-icon.sa-info::before{ content: "priority_high"; transform: rotate(180deg); }
@keyframes sa-icone-entra{
0% { transform: scale(.4); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.sweet-alert .sa-button-container{ display: flex; gap: 10px; margin-top: 24px; }
.sweet-alert .sa-confirm-button-container{ display: block; flex: 1; }
.sweet-alert button{
box-sizing: border-box;
width: 100%;
min-height: 48px;
margin: 0;
padding: 10px 16px;
border: 0;
border-radius: 12px;
font-family: inherit;
font-size: 16px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
transition: transform .1s;
}
.sweet-alert button.cancel{
flex: 1;
border: 1px solid color-mix(in srgb, var(--first-color) 22%, transparent);
background: color-mix(in srgb, var(--first-color) 14%, transparent);
color: var(--first-color);
}
.sweet-alert button.cancel:hover{ background: color-mix(in srgb, var(--first-color) 24%, transparent); }
.sweet-alert button.confirm{
background: var(--sixteenth-color) !important;
color: var(--third-color);
box-shadow: 0 3px 0 color-mix(in srgb, var(--third-color) 70%, transparent) !important;
}
.sweet-alert button.confirm:hover{ filter: brightness(1.06); }
.sweet-alert button:active{ transform: translateY(2px); }
.sweet-alert button.cancel:focus{ box-shadow: none !important; }
.sweet-alert button:focus-visible{ outline: 2px solid color-mix(in srgb, var(--first-color) 60%, transparent); outline-offset: 3px; }
.sweet-alert button.confirm[disabled]{ color: transparent; opacity: 1; }
.sweet-alert button.cancel[disabled]{ opacity: .5; }
/* Bolinhas de "carregando" no lugar do texto, na cor do texto do botão. */
.sweet-alert .la-ball-fall{ margin-top: -9px; color: var(--third-color); }
.sweet-alert input{
border: 1px solid color-mix(in srgb, var(--first-color) 22%, transparent);
border-radius: 12px;
background: color-mix(in srgb, var(--tenth-color) 35%, transparent);
color: var(--first-color);
}
.sweet-alert input:focus{ border-color: var(--sixteenth-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sixteenth-color) 30%, transparent); }
.sweet-alert input::placeholder{ color: var(--first-color); opacity: .45; }
.sweet-alert .sa-error-container{ margin: 0 -22px; background: color-mix(in srgb, var(--tenth-color) 35%, transparent); }
.sweet-alert .sa-error-container p{ margin: 0; color: var(--first-color); }
/* Barra de compradas/gasto presa na lista de cartelas compradas: uma peça só, sem o vão entre as duas. A barra é o
topo, a lista é o corpo num tom mais escuro da cor da barra, separadas por uma linha fina. A sombra da lista não
sobe (clip-path), para não escurecer a barra. */
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas{
margin-bottom: 0;
border-bottom: 1px solid color-mix(in srgb, var(--first-color) 16%, transparent);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas + .bilhete-melhores-cartelas{
border-top-left-radius: 0;
border-top-right-radius: 0;
background: color-mix(in srgb, var(--seventeenth-color) 78%, var(--tenth-color));
}
/* No computador a coluna da direita acompanha a altura da da esquerda (a .principal estica as duas) e a lista ocupa o
que sobra, até o fim do último prêmio; as alturas de antes ficam como mínimo em cada situação. */
@media (orientation: landscape) and (min-width: 1025px) {
:where(.pagina-sorteio) .coluna-direita{ display: flex; flex-direction: column; height: auto; }
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas + .bilhete-melhores-cartelas{
flex: 1 0 auto;
height: 0;
min-height: 30.8vw;
margin-bottom: 0;
border-radius: 0 0 0.8vw 0.8vw;
box-shadow: 0 0.3vw 1vw rgba(0, 0, 0, .35);
clip-path: inset(0 -2vw -2vw -2vw);
}
:where(.pagina-sorteio) .coluna-direita.compra-fechada .cartelas-compradas + .bilhete-melhores-cartelas{ min-height: 19vw; }
:where(.pagina-sorteio) .coluna-direita.compra-fechada.hide-lista .cartelas-compradas + .bilhete-melhores-cartelas{ min-height: 38.4vw; }
}
@media (orientation: portrait), (max-width: 1024px) {
:where(.pagina-sorteio) .coluna-direita .cartelas-compradas + .bilhete-melhores-cartelas{
border-radius: 0 0 14px 14px;
box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
clip-path: inset(0 -20px -20px -20px);
}
}
/* Acumulado no padrão dos prêmios: a estrela fica num medalhão (círculo azul-escuro com aro na cor do acumulado) no
início da barra, no mesmo eixo dos medalhões dos prêmios (--eixo-medalha = tamanho do medalhão das barras com
acumulado) e do tamanho proporcional à barra do acumulado, que é mais alta e mais forte (--medalha-acumulado, que sai
um pouco por cima e por baixo como os troféus); o rótulo começa na mesma linha dos nomes dos prêmios. */
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .acumulado:not(.major, .minor, .mini) {
--eixo-medalha: calc(6vw * 1.05);
--medalha-acumulado: calc(6.4vw * 1.05);
/* A barra começa no centro do medalhão: a borda grossa e o brilho do canto ficam escondidos atrás dele. */
width: calc(100% - var(--eixo-medalha) * .5);
margin-left: calc(var(--eixo-medalha) * .5);
margin-right: 0;
padding-left: calc(var(--eixo-medalha) * .73);
}
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .acumulado:not(.major, .minor, .mini) .label { position: static; }
/* Medalhão */
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .acumulado:not(.major, .minor, .mini) .label::before {
content: "";
display: block !important;
position: absolute;
z-index: 1;
left: calc(var(--medalha-acumulado) * -.5);
right: auto;
top: 50%;
width: var(--medalha-acumulado);
height: var(--medalha-acumulado);
transform: translateY(-50%);
box-sizing: border-box;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #1b5bb8, #031a36 70%);
border: calc(var(--medalha-acumulado) * .06) solid var(--acumulado-destaque, #ffff00);
/* Anel com o mesmo brilho da barra do acumulado. */
box-shadow: 0 0 0 max(.15vw, 2px) color-mix(in srgb, var(--acumulado-destaque, #ffff00) 30%, transparent),
0 0 1.6vw color-mix(in srgb, var(--acumulado-destaque, #ffff00) 60%, transparent),
inset 0 0 calc(var(--medalha-acumulado) * .11) rgba(0, 0, 0, .6);
animation: none;
}
/* Estrela dentro do medalhão (continua flutuando) */
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .acumulado:not(.major, .minor, .mini) .star-acumulado {
z-index: 2;
left: 0;
right: auto;
translate: -50% 0;
width: calc(var(--medalha-acumulado) * .78);
height: calc(var(--medalha-acumulado) * .78);
max-width: none;
max-height: none;
font-size: calc(var(--medalha-acumulado) * .32);
padding-top: calc(var(--medalha-acumulado) * .06);
animation: estrela-medalhao-flutuar 3s ease-in-out infinite;
}
@keyframes estrela-medalhao-flutuar {
0%, 100% { transform: translateY(-55%) rotate(15deg); }
50% { transform: translateY(-61%) rotate(15deg); }
}
/* No celular a barra tem a altura das barras de prêmio, para o medalhão não encostar no de baixo. */
@media (orientation: portrait), (max-width: 1024px) {
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .acumulado:not(.major, .minor, .mini) { --eixo-medalha: 14vw; --medalha-acumulado: calc(14vw * 1.08); height: 14vw; }
}
@media (prefers-reduced-motion: reduce) {
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .acumulado:not(.major, .minor, .mini) .star-acumulado { animation: none; }
}
/* Rótulo como o dos prêmios: "ACUMULADO" pequeno em cima, na cor do aro, e "N BOLAS" embaixo no lugar do nome do
prêmio. --altura-acumulado é a altura da barra do acumulado. */
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .acumulado:not(.major, .minor, .mini) { --altura-acumulado: 6.4vw; }
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .acumulado:not(.major, .minor, .mini) .label {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: left;
}
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .acumulado:not(.major, .minor, .mini) .label .premio-ordem {
display: block;
font-size: calc(var(--altura-acumulado) * .2);
line-height: 1;
letter-spacing: .08em;
color: var(--acumulado-destaque, #ffff00);
margin-bottom: calc(var(--altura-acumulado) * .04);
}
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .acumulado:not(.major, .minor, .mini) .label .acumulado-bolas {
font-size: calc(var(--altura-acumulado) * .36);
line-height: 1.05;
color: #fff;
white-space: nowrap;
}
@media (orientation: portrait), (max-width: 1024px) {
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .acumulado:not(.major, .minor, .mini) { --altura-acumulado: 14vw; }
:where(.pagina-sorteio) .espera:not(.espera-total) .proximos .linha > .acumulado:not(.major, .minor, .mini) .label .acumulado-bolas { font-size: calc(var(--altura-acumulado) * .3); }
}