*{

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

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

}

html,
body{
    width:100%;
    height:100%;
}

body{
    margin:0;
    background:#000; /* fundo preto */

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

    height:100dvh;
    overflow:hidden;
}
#fundo{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    z-index:0;
}
@media(max-width:700px){
    #fundo{
        object-position:65% center;
    }
}
#game{
    position:relative;

    width:100vw;
    height:100dvh;

    max-width:430px;
    max-height:932px;

    aspect-ratio:9/19.5;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    background:#000;

    border-radius:30px;
    box-shadow:0 0 40px rgba(0,0,0,.6);
}
@media (max-width: 768px){

    #game{

        max-width:none;
        max-height:none;

        width:100vw;
        height:100dvh;

        border-radius:0;
        box-shadow:none;

    }

}
.roleta-container{
    position:relative;

    width:90%;
    aspect-ratio:1;
    max-width:650px;

    transform:translateY(-40px);
}

#roletaGrande{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
    object-fit:contain;
}

#roletaPequena{
    position:absolute;
    width:35%;
    left:50%;
    top:48%;
    transform:translate(-50%,-50%);
    z-index:2;
}

#ponteiro{
    position:absolute;

    width:20%;

    left:50%;

    top:-3%;
    z-index:9999;
    transform:translateX(-50%);
}
#painelEsquerdo{
    position:absolute;

    left:15px;
    bottom:80px;

    z-index:100;
}

#painelDireito{
    position:absolute;

    right:15px;
    bottom:80px;

    z-index:100;
}
#setaCentro{
    position:absolute;

    width:6%;

    left:50%;
    top:35%;

    transform:translate(-50%,-50%) rotate(180deg);

    z-index:5;
}
#botaoContainer{

    position:absolute;
    left:50%;
    top:100%;

    width:30%;

    transform:translateX(-50%);
}

#botaoOn,
#botaoOff{

    position:absolute;
    inset:0;
    width:100%;

    user-select:none;
    -webkit-user-drag:none;

    transition:
        opacity .15s ease,
        transform .15s cubic-bezier(.22,1,.36,1),
        filter .15s ease;

    will-change:transform,opacity;

}

#botaoOn{

    opacity:1;
    pointer-events:auto;
	transform:scale(1.20);

}

#botaoOff{

    opacity:0;
    pointer-events:none;
	transform:scale(1.14);
    transition:
        opacity .12s ease,
        transform .12s ease,
        filter .12s ease;
}

#botaoContainer.girando{

    transform:translateX(-50%) scale(.95);

    filter:brightness(.90);

}
#botaoContainer.girando #botaoOn{

    opacity:0;
    transform:scale(.98);

}

#botaoContainer.girando #botaoOff{

    opacity:1;
    transform:scale(.98);
    filter:brightness(.88);
    box-shadow: inset 0 4px 8px rgba(0,0,0,.35);

}
#modalSaque{

    display:none;

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(8px);

    justify-content:center;

    align-items:center;

    z-index:99999;

}

#modalSaque .modalBox{

    width:min(92vw,420px);

    background:linear-gradient(#340000,#120000);

    border:2px solid #FFD46B;
    max-height:90vh;
    border-radius:22px;
    overflow-y:auto;
    padding:28px;
    box-sizing:border-box;
    box-shadow:
        0 0 35px rgba(255,0,0,.45),
        inset 0 0 30px rgba(255,255,255,.04);

    position:relative;

}
.saqueHeader{

    text-align:center;

    margin-bottom:30px;

}
.saqueLogo{

    width:74px;

    height:74px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(#ffdb64,#c88900);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#222;

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

}
.saqueHeader h2{

    margin:18px 0 8px;

    color:#fff;

    letter-spacing:2px;

    font-size:24px;

}
#modalPix{

    display:none;

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(8px);

    justify-content:center;

    align-items:center;

    z-index:99999;

    padding:20px;

}

#modalPix .modalBox{

    position:relative;

    width:min(92vw,430px);

    max-height:90vh;

    overflow-y:auto;

    background:linear-gradient(#340000,#120000);

    border:2px solid #FFD46B;

    border-radius:22px;

    padding:28px;

    box-sizing:border-box;

    box-shadow:
        0 0 35px rgba(255,0,0,.45),
        inset 0 0 30px rgba(255,255,255,.04);

}
.pixValor{

    text-align:center;

    margin:18px 0;

    padding:16px;

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

    border:1px solid rgba(255,212,74,.25);

    border-radius:14px;

}

.pixValor small{

    display:block;

    color:#bdbdbd;

    letter-spacing:1px;

    margin-bottom:6px;

    font-size:12px;

}

.pixValor strong{

    color:#FFD54A;

    font-size:30px;

    font-weight:700;

}
.statusPagamento{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-top:20px;

    padding:16px;

    background:#3b0b0b;

    border:1px solid rgba(255,212,74,.2);

    border-radius:14px;

}

.statusPagamento strong{

    display:block;

    color:#FFD54A;

    font-size:16px;

    margin-bottom:4px;

}

.statusPagamento small{

    display:block;

    color:#cfcfcf;

    line-height:1.5;

    font-size:13px;

}
.pixHeader{

    text-align:center;

    margin-bottom:20px;

}

.pixHeader h2{

    color:#fff;

    margin:12px 0 8px;

}

.pixHeader p{

    color:#d8d8d8;

    font-size:14px;

}

.qrBox{

    width:220px;

    height:220px;

    margin:20px auto;

    background:#fff;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:12px;

}

.qrBox img{

    width:100%;

    height:100%;

    object-fit:contain;

}

.pixCodigo{

    margin-top:20px;

}

.pixCodigo label{

    display:block;

    color:#fff;

    margin-bottom:8px;

}

.pixCodigo textarea{

    width:100%;

    height:90px;

    resize:none;

    border:none;

    outline:none;

    border-radius:12px;

    padding:12px;

    box-sizing:border-box;

    font-size:13px;

    background:#fff7e3;

}

#copiarPix{

    width:100%;

    margin-top:15px;

}

.pixInfo{

    margin-top:20px;

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

    border-radius:14px;

    padding:15px;

}

.pixInfo strong{

    color:#FFD54A;

}

.pixInfo ul{

    margin:10px 0 0 18px;

    color:#eee;

}

.pixInfo li{

    margin-bottom:6px;

}
.bolinhaPagamento{

    width:12px;
    height:12px;

    border-radius:50%;

    background:#FFD54A;

    animation:pulsar 1s infinite;

}

@keyframes pulsar{

    0%{

        transform:scale(1);
        opacity:1;

    }

    50%{

        transform:scale(1.4);
        opacity:.4;

    }

    100%{

        transform:scale(1);
        opacity:1;

    }

}
#modalDepositar{

    display:none;

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(8px);

    justify-content:center;

    align-items:center;

    z-index:99999;

}

#modalDepositar .modalBox{

    width:min(92vw,420px);

    background:#2b0000;

    border:2px solid #d4a22a;

    border-radius:22px;

    padding:28px;

    box-sizing:border-box;

}

.depositoHeader{

    text-align:center;

    margin-bottom:20px;

}

.depositoHeader h2{

    color:#fff;

    margin:10px 0 5px;

}

.depositoHeader small{

    color:#c8c8c8;

}

.valoresDeposito{

    display:grid;

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

    gap:10px;

    margin:20px 0;

}

.valorDeposito{

    height:48px;

    border:none;

    border-radius:12px;

    background:#3b0b0b;

    color:#FFD54A;

    font-weight:700;

    font-size:16px;

    cursor:pointer;

    transition:.2s;

}

.valorDeposito:hover{

    background:#4f0e0e;

    transform:translateY(-2px);

}

.valorDeposito.ativo{

    background:#FFD54A;

    color:#2b0000;

}

#confirmarDeposito{

    width:100%;

    margin-top:18px;

}
.saqueOpcoes{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-top:25px;

}
.saldoBox{

    margin-top:15px;

    padding:15px;

    border-radius:16px;

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

}

.saldoBox small{

    display:block;

    color:#bdbdbd;

    margin-bottom:8px;

}

#saldoSaque{

    color:#ffd85d;

    font-size:30px;

    font-weight:bold;

}
.saqueOpcoes{

    display:flex;

    flex-direction:column;

    gap:16px;

}
.saqueOpcoes .perfilBotao{

    height:60px;

    border-radius:16px;

    background:linear-gradient(180deg,#393939,#232323);

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

    transition:.18s;

}
.saqueOpcoes .perfilBotao:hover{

    transform:translateY(-2px);

    border-color:#ffd24a;

    box-shadow:0 0 18px rgba(255,210,70,.25);

}
.campoSaque{

    display:flex;

    flex-direction:column;

    margin-bottom:16px;

}

.campoSaque label{

    color:#fff;

    font-size:14px;

    margin-bottom:6px;

}
.campoSaque input{

    height:54px;

    border-radius:14px;

    background:#222;

    color:#fff;

    border:2px solid #3a3a3a;

    padding:0 16px;

    transition:.2s;

}
.campoSaque input:focus{

    border-color:#ffd54a;

    box-shadow:0 0 12px rgba(255,210,70,.25);

}
.botoesSaque{

    display:flex;

    gap:12px;

    margin-top:20px;

}

.botoesSaque button{

    flex:1;

}
*{
    -webkit-tap-highlight-color: transparent;
}
/* ===========================
   PAINEL ESQUERDO / DIREITO
=========================== */

#painelEsquerdo,
#painelDireito{

    position:absolute;

    display:flex;
    flex-direction:column;
    gap:12px;

    z-index:500;
}

#painelEsquerdo{
    left:10px;
    bottom:60px;
}

#painelDireito{
    right:10px;
    bottom:60px;
}

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

#btnDepositar,
#btnTurbo{

    width:clamp(90px,28vw,115px);
    height:45px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    border-radius:14px;

    cursor:pointer;

    font-family:Arial;
    font-size:11px;
    font-weight:bold;

    transition:.2s;

}
/* TURBO ATIVO */

#btnTurbo.ativo{

    color:#fff;

    border:2px solid #f8d77d;

    background:
        linear-gradient(180deg,#ff4d4d 0%,#d40000 55%,#8b0000 100%);

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

}

#btnTurbo.ativo:hover{

    transform:scale(1.05);

    box-shadow:
        0 0 18px rgba(255,40,40,.8),
        inset 0 2px 2px rgba(255,255,255,.5);

}
/* Depositar */

#btnDepositar{

    color:#fff;

    border:2px solid #f8d77d;

    background:
        linear-gradient(180deg,#ff4d4d 0%,#d40000 55%,#8b0000 100%);

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

}

#btnDepositar:hover{

    transform:scale(1.05);

    box-shadow:
        0 0 18px rgba(255,40,40,.8),
        inset 0 2px 2px rgba(255,255,255,.5);

}

/* Turbo */

#btnTurbo{

    color:#ff4b4b;

    border:2px solid #7a1d1d;

    background:linear-gradient(#2a2a2a,#090909);

    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.08),
        0 0 10px rgba(0,0,0,.5);

}

#btnTurbo:hover{

    border-color:#ff4444;

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

}

/* ===========================
   ÍCONES
=========================== */

.icone{

    width:14px;
    height:14px;

    color:white;

    flex-shrink:0;

}

/* ===========================
   CAIXAS
=========================== */

.boxInfo{

    width:clamp(85px,25vw,105px);
    height:60px;
    border-radius:14px;

    padding:8px;

    text-align:center;

    background:linear-gradient(#1d1d1d,#090909);

    border:2px solid #393939;

    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.08),
        0 0 10px rgba(0,0,0,.45);

}

.boxInfo small{

    display:block;

    color:#8d8d8d;

    font-size:10px;

    letter-spacing:1px;

}

.boxInfo strong{

    display:block;

    margin-top:5px;

    color:#ff3b3b;

    font-size:20px;

    width:100%;

    white-space:nowrap;

    overflow:hidden;

    line-height:1.1;

}

/* ===========================
   + E -
=========================== */

.btnValor{

    width:clamp(36px,10vw,42px);
    height:clamp(36px,10vw,42px);

    border:none;

    border-radius:14px;

    cursor:pointer;

    color:#ff2d2d;

    font-size:28px;

    font-weight:bold;

    background:linear-gradient(#2a2a2a,#090909);

    border:2px solid #7a1d1d;

    transition:.2s;

}

.btnValor:hover{

    transform:scale(1.08);

    border-color:#ff3b3b;

    box-shadow:
        0 0 12px rgba(255,0,0,.5);

}
/* ==========================
   TELA DE CARREGAMENTO
========================== */

#loading{

    position:fixed;
    inset:0;

    background:
        radial-gradient(circle at center,#3a0000 0%,#120000 45%,#000 100%);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    overflow:hidden;

    z-index:999999;
}

#loadingGlow{

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:radial-gradient(rgba(255,0,0,.18),transparent 70%);

    filter:blur(25px);

    animation:pulse 2s infinite;
}

#loadingLogo{

    width:160px;

    margin-bottom:18px;

    z-index:2;
}

#loading h1{

    color:#FFD46B;

    font-size:36px;

    letter-spacing:3px;

    text-shadow:
        0 0 10px rgba(255,180,0,.6),
        0 0 20px rgba(255,0,0,.5);

    margin-bottom:8px;

    z-index:2;
}

#loading h2{

    color:#d4b06d;

    font-size:15px;

    font-weight:normal;

    margin-bottom:25px;

    z-index:2;
}

#loadingTexto{

    color:#ffffff;

    font-size:18px;

    margin-bottom:15px;

    z-index:2;
}

#barra{

    width:260px;
    height:12px;

    border-radius:20px;

    overflow:hidden;

    background:#2b2b2b;

    border:1px solid #5a3d00;

    z-index:2;
}

#progresso{

    width:0%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            #700000,
            #d00000,
            #ff2d2d,
            #ff7a00
        );

    box-shadow:
        0 0 15px #ff0000;

    transition:width .2s linear;
}

#porcentagem{

    margin-top:12px;

    color:#FFD46B;

    font-size:16px;

    font-weight:bold;

    z-index:2;
}

@keyframes pulse{

    0%{

        transform:scale(.9);
        opacity:.4;

    }

    50%{

        transform:scale(1.1);
        opacity:1;

    }

    100%{

        transform:scale(.9);
        opacity:.4;

    }

}
/* ===========================
   BOTÕES SUPERIORES
=========================== */

#menuSuperior{
    display:none;
    position:fixed;

    top:calc(env(safe-area-inset-top) + 12px);
    right:calc(env(safe-area-inset-left) + 12px);
    flex-direction:column;
    gap:8px;

    z-index:999999;
}

.btnTopo{

    width:30px;
    height:30px;

    border-radius:50%;
    border:1px solid rgba(255,255,255,.15);

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

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

    backdrop-filter:blur(8px);
}

.iconeTopo{

    width:14px;
    height:14px;

    color:#ff2b2b;
}
/*==========================
 LOGIN
==========================*/

#loginOverlay{

    position:fixed;
    inset:0;

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

    backdrop-filter:blur(8px);

    display:none;
    transition:opacity .25s ease;
    justify-content:center;
    align-items:center;

    z-index:999998;
}
@keyframes pulseValor{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.12);
    }

    100%{
        transform:scale(1);
    }

}

.pulsar{

    animation:pulseValor .18s ease;

}
#loginBox{

    width:min(90%,340px);

    padding:28px;

    border-radius:22px;

    background:linear-gradient(
        180deg,
        #260000,
        #120000
    );

    border:2px solid #8a1d1d;

    box-shadow:
        0 0 35px rgba(255,0,0,.30),
        inset 0 0 30px rgba(255,255,255,.03);

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:14px;
}

#loginIcon{

    width:74px;
    height:74px;

    margin:0 auto 20px;

    border-radius:50%;

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

    background:linear-gradient(#500000,#1a0000);

    border:2px solid #ff4a4a;

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

}
#loginBox{
    position:relative;
}

#fecharLogin{

    position:absolute;

    top:12px;
    right:12px;

    width:32px;
    height:32px;

    border:none;
    border-radius:50%;

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

    color:#ff3b3b;

    font-size:20px;
    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}

#fecharLogin:hover{

    background:#b30000;
    color:#fff;

    transform:scale(1.08);

}

#fecharLogin:active{

    transform:scale(.95);

}
.campo{

    width:100%;

    display:flex;
    flex-direction:column;

    gap:8px;

    margin-bottom:14px;

}

.campo label{

    color:#FFD46B;

    font-size:13px;

    font-weight:bold;

    margin-left:2px;

}

#loginIcon svg{

    width:42px;
    height:42px;

    color:#ff2d2d;
}

#loginBox h2{

    color:#FFD46B;

    font-size:30px;

    letter-spacing:2px;
}

.subtitulo{

    color:#bbbbbb;

    font-size:13px;

    margin-bottom:6px;
}

#loginBox input{

    width:100%;

    height:48px;

    border:none;

    outline:none;

    border-radius:14px;

    padding:0 15px;

    font-size:15px;

    color:white;

    background:#1b1b1b;

    border:1px solid #4b1a1a;
}

#loginBox input:focus{

    border-color:#ff3333;

    box-shadow:0 0 10px rgba(255,0,0,.35);
}

#btnCadastrar{

    width:100%;

    height:48px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-weight:bold;

    color:white;

    background:linear-gradient(
        180deg,
        #ff5555,
        #b10000
    );

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

    transition:.2s;
}

#btnCadastrar:hover{

    transform:scale(1.03);
}
.trocarTela{

    margin-top:8px;

    color:#d4d4d4;

    font-size:14px;

    text-align:center;

}

.trocarTela b{

    color:#ff2d2d;

    cursor:pointer;

    font-weight:bold;

    transition:.2s;

}

.trocarTela b:hover{

    color:#ff6a6a;

    text-shadow:0 0 8px red;

}
#btnEntrar{

    width:100%;
    height:48px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    color:#fff;

    font-weight:bold;

    background:linear-gradient(
        180deg,
        #ff5555,
        #b10000
    );

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

    transition:.2s;

}

#btnEntrar:hover{

    transform:scale(1.03);

}
#formLogin,
#formCadastro{

    animation:fade .25s;

}

@keyframes fade{

    from{

        opacity:0;
        transform:translateY(12px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}
#alerta{

    position:fixed;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%) scale(.85);

    min-width:280px;
    max-width:90vw;

    padding:18px 22px;

    display:flex;
    align-items:center;
    gap:15px;

    background:
        linear-gradient(180deg,#b60000,#5d0000);

    border:2px solid #FFD46B;

    border-radius:18px;

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

    opacity:0;
    pointer-events:none;

    transition:
        opacity .28s ease,
        transform .28s ease;

    z-index:9999999;

}

#alerta.mostrar{

    opacity:1;

    transform:translate(-50%,-50%) scale(1);

}

#alertaIcone{

    width:44px;
    height:44px;

    flex-shrink:0;

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

    border-radius:50%;

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

}

#alertaIcone svg{

    width:28px;
    height:28px;

    color:#FFD46B;

}

#alertaTexto{

    color:#fff;

    font-size:16px;

    font-weight:bold;

    line-height:1.4;

}
#ajudaOverlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.65);
    backdrop-filter:blur(8px);

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

    z-index:999999;

}

#ajudaBox{

    width:min(92vw,430px);
    max-height:85vh;

    overflow:auto;

    background:linear-gradient(#2a0000,#120000);

    border:2px solid #FFD46B;

    border-radius:20px;

    padding:22px;

    position:relative;

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

}
.depositoIcone{

    width:90px;
    height:90px;

    margin:0 auto 15px;

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

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

    border:2px solid rgba(255,212,74,.3);

    border-radius:50%;

}
.loadingSvg{

    width:20px;
    height:20px;

    display:none;

    margin-right:10px;

    animation:girar 1s linear infinite;

}

.loadingSvg circle{

    fill:none;

    stroke:#fff;

    stroke-width:5;

    stroke-linecap:round;

    stroke-dasharray:70;

    stroke-dashoffset:25;

}

#confirmarDeposito{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}

#confirmarDeposito.carregando{

    opacity:.7;

    cursor:not-allowed;

}

#confirmarDeposito.carregando .loadingSvg{

    display:block;

}

@keyframes girar{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}
#fecharAjuda{

    position:absolute;

    top:12px;
    right:12px;

    width:34px;
    height:34px;

    border:none;

    border-radius:50%;

    background:#700000;

    color:#fff;

    cursor:pointer;

    font-size:18px;

}
#fecharPix{

    position:absolute;

    top:12px;
    right:12px;

    width:34px;
    height:34px;

    border:none;

    border-radius:50%;

    background:#700000;

    color:#fff;

    cursor:pointer;

    font-size:18px;

}
#fecharDeposito{

    position:absolute;

    top:12px;
    right:12px;

    width:34px;
    height:34px;

    border:none;

    border-radius:50%;

    background:#700000;

    color:#fff;

    cursor:pointer;

    font-size:18px;

}
#abasAjuda{

    display:flex;

    gap:10px;
margin-top:30px;

    margin-bottom:25px;

}

.abaAjuda{

    flex:1;

    height:42px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    color:#ff3b3b;

    background:#181818;

    font-weight:bold;

}

.abaAjuda.ativa{

    color:white;

    background:linear-gradient(#ff4040,#920000);

    border:2px solid #FFD46B;

}

#conteudoComo h2,
#conteudoSuporte h2{

    color:#FFD46B;

    margin-bottom:15px;

}

#conteudoComo h3{

    color:white;

    margin-bottom:15px;

}

#conteudoComo p{

    color:#ddd;

    margin-bottom:12px;

    line-height:1.6;

}

#mensagemSuporte{

    width:100%;

    height:180px;

    resize:none;

    border:none;

    outline:none;

    border-radius:14px;

    padding:15px;

    background:#111;

    color:white;

    margin-top:10px;

    margin-bottom:20px;

}

#enviarSuporte{

    width:100%;

    height:48px;

    border:none;

    border-radius:14px;

    color:white;

    font-weight:bold;

    cursor:pointer;

    background:linear-gradient(#ff4040,#920000);

    border:2px solid #FFD46B;

}
#perfilOverlay{

    position:fixed;
    inset:0;

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

    background:rgba(0,0,0,.65);
    backdrop-filter:blur(10px);

    z-index:999999;

}

#perfilBox{

    position:relative;

    width:min(92vw,420px);

    background:linear-gradient(#340000,#120000);

    border:2px solid #FFD46B;

    border-radius:22px;

    padding:28px;

    box-shadow:
        0 0 35px rgba(255,0,0,.45),
        inset 0 0 30px rgba(255,255,255,.04);

}

#fecharPerfil{

    position:absolute;

    top:12px;
    right:12px;

    width:34px;
    height:34px;

    border:none;
    border-radius:50%;

    background:#7b0000;

    color:white;

    cursor:pointer;

    font-size:18px;

}
#modalDetalhes{

    display:none;

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(8px);

    justify-content:center;

    align-items:center;

    z-index:99999;

}

#modalDetalhes .modalBox{

    width:min(92vw,420px);

    max-height:90vh;

    overflow-y:auto;

    background:#2b0000;

    border:2px solid #d4a22a;

    border-radius:22px;

    padding:28px;

    box-sizing:border-box;

    position:relative;

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

}
#modalDetalhes h2{

    color:#fff;

    text-align:center;

    margin:0 0 25px;

}
.detalheItem{

    background:#3b0b0b;

    border:1px solid rgba(255,212,74,.2);

    border-radius:12px;

    padding:12px 14px;

    margin-bottom:10px;

}

.detalheItem span{

    display:block;

    color:#c7c7c7;

    font-size:12px;

    margin-bottom:4px;

    text-transform:uppercase;

}

.detalheItem strong{

    color:#fff;

    font-size:16px;

    font-weight:600;

    word-break:break-word;

}
#fecharHistorico{

    position:absolute;

    top:12px;
    right:12px;

    width:34px;
    height:34px;

    border:none;
    border-radius:50%;

    background:#7b0000;

    color:white;

    cursor:pointer;

    font-size:18px;

}
#fecharDetalhes{

    position:absolute;

    top:12px;
    right:12px;

    width:34px;
    height:34px;

    border:none;
    border-radius:50%;

    background:#7b0000;

    color:white;

    cursor:pointer;

    font-size:18px;

}
.semSaques{

    color:#fff;

    text-align:center;

    font-size:16px;

    padding:25px;

}
.itemSaque{

    background:#3b0b0b;

    border:1px solid rgba(255,212,74,.2);

    border-radius:14px;

    padding:14px 16px;

    margin-bottom:10px;
	
    transition:.2s;

    cursor:pointer;

}
.itemSaque:hover{

    transform:translateY(-2px);

    border-color:#FFD54A;

}

.itemSaque:active{

    transform:scale(.98);

}
.linhaSaque{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

}
.statusSaque{

    display:flex;

    align-items:center;

    gap:8px;

}
.statusSaque strong{

    color:#fff;

    font-size:16px;

    font-weight:600;

}
.itemSaque small{

    color:#bdbdbd;

    font-size:13px;

}
.bolinha{

    width:10px;

    height:10px;

    border-radius:50%;

}
.bolinha.pendente{

    background:#ffd54a;

    animation:pulsar 1s infinite;

}
.bolinha.concluido{

    background:#34d058;

}
#modalHistorico{

    display:none;

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(8px);

    justify-content:center;

    align-items:center;

    z-index:99999;

}
.historicoHeader h2{

    color:#fff;

    font-size:24px;

    font-weight:700;

    margin:0;

}
.historicoIcone{

    color:#ffd54a;

}
#modalHistorico .modalBox{

    width:min(92vw,420px);

    max-height:90vh;

    overflow-y:auto;

    background:linear-gradient(#340000,#120000);

    border:2px solid #FFD46B;

    border-radius:22px;

    padding:28px;

    box-sizing:border-box;

    position:relative;

    box-shadow:
        0 0 35px rgba(255,0,0,.45),
        inset 0 0 30px rgba(255,255,255,.04);

}
#listaSaques{

    margin-top:25px;

    display:flex;

    flex-direction:column;

    gap:12px;

}
.statusSaque{

    display:flex;

    align-items:center;

    gap:12px;

}
.valorSaque{

    color:#FFD54A;

    font-size:20px;

    font-weight:700;

    white-space:nowrap;

}
.dataSaque{

    display:block;

    margin-top:6px;

    color:#b8b8b8;

    font-size:12px;

}
@keyframes pulsar{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.5);

        opacity:.5;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}
#fecharSaque{

    position:absolute;

    top:12px;
    right:12px;

    width:34px;
    height:34px;

    border:none;
    border-radius:50%;

    background:#7b0000;

    color:white;

    cursor:pointer;

    font-size:18px;

}
#perfilTopo{

    display:flex;
    flex-direction:column;
    align-items:center;

    margin-bottom:28px;

}

#perfilAvatar{

    width:82px;
    height:82px;

    border-radius:50%;

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

    color:#FFD46B;

    background:linear-gradient(#b80000,#5d0000);

    border:2px solid #FFD46B;

    margin-bottom:14px;

}

#perfilAvatar svg{

    width:46px;
    height:46px;

}

#perfilNome{

    color:#fff;

    margin:0;

}

#perfilID{

    color:#FFD46B;

    margin-top:6px;

    font-size:14px;

}

.perfilInfo{

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

    margin-bottom:22px;

    padding:14px;

    border-radius:14px;

    background:#180000;

}

.perfilInfo span{

    color:#FFD46B;

}

.perfilInfo strong{

    color:#fff;

    font-size:20px;

}

.perfilBotao{

    width:100%;

    height:50px;

    margin-top:12px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:15px;
    font-weight:bold;

    color:white;

    background:
        linear-gradient(#ff4d4d,#980000);

    border:2px solid #FFD46B;

}

.perfilBotao:hover{

    transform:scale(1.02);

}

.sair{

    margin-top:24px;

    background:
        linear-gradient(#444,#111);

    border-color:#888;

}
.perfilBotao{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

}

.perfilIcone{

    width:20px;
    height:20px;

    color:#fff;

    flex-shrink:0;

}
/*=========================
MODAL PRÊMIO
=========================*/

#premioOverlay{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(8px);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

    animation:fadePremio .25s ease;

}

#premioBox{

    width:360px;

    max-width:92%;

    background:linear-gradient(180deg,#4d0000,#210000);

    border:2px solid #ffbf00;

    border-radius:18px;

    padding:28px;

    text-align:center;

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

    animation:zoomPremio .35s cubic-bezier(.18,.89,.32,1.28);

}

#premioIcone{

    width:90px;

    height:90px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:linear-gradient(#ffd34d,#ffb100);

    color:#7d0000;

    box-shadow:
    0 0 30px rgba(255,210,0,.6);

    animation:brilhoPremio 1.5s infinite;

}

#premioIcone svg{

    width:52px;

    height:52px;

}

#premioBox h2{

    color:#fff;

    margin-top:18px;

    margin-bottom:20px;

    font-size:32px;

    letter-spacing:2px;

    text-shadow:0 0 12px rgba(255,255,255,.25);

}

#multiplicadores{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    font-size:34px;

    font-weight:bold;

    color:#ffd54d;

    margin-bottom:18px;

}

#resultadoFinal{

    font-size:54px;

    font-weight:bold;

    color:#fff;

    margin-bottom:20px;

    text-shadow:
    0 0 15px #ff0000,
    0 0 35px #ffbf00;

}

#valorPremio{

    font-size:30px;

    color:#3dff6f;

    font-weight:bold;

    margin-bottom:28px;

    text-shadow:0 0 15px rgba(0,255,120,.5);

}

#btnReceberPremio{

    width:100%;

    height:58px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:18px;

    font-weight:bold;

    letter-spacing:2px;

    color:#fff;

    background:linear-gradient(#ff4040,#b30000);

    transition:.2s;

    box-shadow:
    0 8px 18px rgba(255,0,0,.35);

}

#btnReceberPremio:hover{

    transform:scale(1.04);

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

}

#btnReceberPremio:active{

    transform:scale(.97);

}
.tipoPixGrid{

display:grid;

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

gap:10px;

margin-top:12px;

}

.tipoPix{

height:52px;

border-radius:14px;

background:#202020;

border:2px solid #3a3a3a;

color:#fff;

font-weight:600;

cursor:pointer;

transition:.2s;

}

.tipoPix:hover{

border-color:#FFD46B;

transform:translateY(-2px);

}

.tipoPix.ativo{

background:#8b0000;

border-color:#FFD46B;

color:#FFD46B;

}
.perfilIconeGrande{

    width:42px;
    height:42px;

}
@keyframes brilhoPremio{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes fadePremio{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes zoomPremio{

    from{

        opacity:0;

        transform:scale(.7);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}
html,
body{
    overflow:hidden;
    touch-action:none;
}