/* ==========================================================
   Roletinha — layout mobile (largura máxima de celular)
   ========================================================== */

:root {
    --fundo:        #121111;
    --app:          #1f1d1d;
    --cartao:       #2a2727;
    --cartao-2:     #343030;
    --borda:        #3d3838;
    --texto:        #f5f5f5;
    --texto-suave:  #a9a3a3;

    --verde:        #00b733;
    --azul:         #00a3ff;
    --vermelho:     #fd2d2d;
    --laranja:      #ff5a1f;
    --cinza:        #5e5959;

    --roleta-vermelho: #d32f2f;
    --roleta-preto:    #151515;
    --roleta-verde:    #0a8f3c;

    --raio:         16px;
    --raio-p:       10px;
    --sombra:       0 4px 14px rgba(0, 0, 0, .35);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    /* leve tom de mesa de roleta no topo */
    background: radial-gradient(1100px 520px at 50% -120px, #16271c 0%, var(--fundo) 70%) fixed, var(--fundo);
    color: var(--texto);
    font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.35;
}

h1, h2, h3, h4, h5, p {
    margin: 0;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 2px;
}

/* Valores em reais e placares com dígitos de mesma largura */
.small-box h2,
.placar p,
.grupo .valor,
.grupo .titulo p {
    font-variant-numeric: tabular-nums;
}

.container {
    max-width: 420px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 12px 14px calc(28px + env(safe-area-inset-bottom));
    background: var(--app);
    box-shadow: var(--sombra);
}

@media (min-width: 460px) {
    .container {
        margin: 16px auto;
        min-height: auto;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, .05);
    }
}

section {
    margin-top: 18px;
}

/* Computador: duas colunas (jogo à esquerda, estratégia à direita) */
@media (min-width: 900px) {
    .container {
        max-width: 900px;
        margin: 32px auto;
        padding: 22px 26px 26px;
    }

    .colunas-app {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        align-items: start;
    }

    .coluna-b > section:first-child {
        margin-top: 10px;
    }
}

/* ---------- Cabeçalho ---------- */

.logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 2px;
}

.marca {
    display: flex;
    align-items: center;
    gap: 10px;
}

.marca-icone {
    width: 38px;
    height: 38px;
    flex: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}

.usuario {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 18px;
}

.selo-demo {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 163, 255, .15);
    color: var(--azul);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.assinatura {
    font-size: 12px;
    color: var(--texto-suave);
}

.acoes-topo {
    display: flex;
    gap: 8px;
}

.btn-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--cartao);
    color: var(--texto);
    font-size: 15px;
    text-decoration: none;
    transition: background .2s, transform .1s;
}

.btn-icone:hover {
    background: var(--cartao-2);
}

.btn-icone:active {
    transform: scale(.94);
}

#abrirGuia {
    background: var(--azul);
}

/* Aviso de limite de uso da API */
.aviso-servidor {
    margin: 10px 2px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--vermelho);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

/* ---------- Banca / Lucro ---------- */

.topo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.small-box {
    display: block;
    background: var(--cartao);
    border-radius: var(--raio);
    padding: 12px 14px;
    box-shadow: var(--sombra);
    cursor: text;
}

.small-box h5 {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
    margin-bottom: 6px;
}

.small-box h2 {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 19px;
    font-weight: 800;
    white-space: nowrap;
}

.bancaUsu {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--texto);
    font: inherit;
}

.bancaUsu::placeholder {
    color: var(--texto-suave);
}

#saldoLucro.positivo { color: var(--verde); }
#saldoLucro.negativo { color: var(--vermelho); }

/* ---------- Número sorteado e placar ---------- */

.inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: end;
}

.inputs p {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
    text-align: center;
    margin-bottom: 6px;
}

.campo-numero {
    position: relative;
}

.campo-numero input {
    width: 100%;
    height: 56px;
    padding: 0 56px 0 14px;
    border-radius: var(--raio);
    border: 2px solid var(--borda);
    background: var(--cartao);
    color: var(--texto);
    font: inherit;
    font-size: 28px;
    font-weight: 800;
    outline: none;
    transition: border-color .2s;
}

.campo-numero input:focus {
    border-color: var(--azul);
}

.campo-numero input::placeholder {
    color: var(--cinza);
}

.campo-numero button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--azul);
    color: #fff;
    font-size: 17px;
}

.campo-numero button:active {
    transform: translateY(-50%) scale(.94);
}

/* Esconde as setas do campo numérico */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.placar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    text-align: center;
}

.placar h2 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--texto-suave);
    margin-bottom: 6px;
}

.placar p {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--raio);
    font-size: 22px;
    font-weight: 800;
    color: #fff;
}

.bg-win p  { background: var(--verde); }
.bg-loss p { background: var(--vermelho); }

/* ---------- Títulos ---------- */

.titulos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 10px;
}

#reload {
    width: 32px;
    height: 32px;
    font-size: 13px;
    background: var(--azul);
    color: #fff;
}
/* ---------- Últimos números ---------- */

.box-ultimos {
    background: var(--cartao);
    border-radius: var(--raio);
    padding: 14px 10px 8px;
    box-shadow: var(--sombra);
}

.box-ultimos ul {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.box-ultimos li {
    position: relative;
    display: flex;
    justify-content: center;
}

.bola {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px dashed var(--cinza);
    color: var(--texto-suave);
    font-weight: 800;
    font-size: 18px;
}

.bola.vermelho,
.bola.preto,
.bola.verde {
    border: 2px solid rgba(255, 255, 255, .85);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

.bola.vermelho { background: var(--roleta-vermelho); }
.bola.preto    { background: var(--roleta-preto); }
.bola.verde    { background: var(--roleta-verde); }

/* O mais recente ganha destaque */
.box-ultimos li:first-child .bola.vermelho,
.box-ultimos li:first-child .bola.preto,
.box-ultimos li:first-child .bola.verde {
    outline: 3px solid var(--azul);
    outline-offset: 2px;
}

/* Posição do número: discreta, para não competir com as bolas */
.box-ultimos strong {
    position: absolute;
    top: -6px;
    left: calc(50% - 29px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cartao-2);
    border: 1px solid var(--borda);
    color: var(--texto-suave);
    font-size: 9.5px;
    font-weight: 700;
}

.box-ultimos strong.excluir {
    width: 20px;
    height: 20px;
    background: var(--vermelho);
    border-color: var(--vermelho);
    color: #fff;
    cursor: pointer;
    font-size: 9.5px;
}

/* Aviso de que os números são uma simulação */
.nota-simulacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: var(--raio-p);
    background: rgba(0, 163, 255, .08);
    border: 1px solid rgba(0, 163, 255, .25);
    color: var(--texto-suave);
    font-size: 12.5px;
}

.nota-simulacao[hidden] {
    display: none;
}

.nota-simulacao > i {
    color: var(--azul);
}

.nota-simulacao span {
    flex: 1 1 200px;
}

.nota-simulacao button {
    padding: 4px 12px;
    border: none;
    border-radius: 999px;
    background: var(--azul);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* ---------- Estratégias (dúzias / colunas) ---------- */

.estrategia {
    transition: opacity .25s;
}

.estrategia.desligada .grupos {
    opacity: .35;
    filter: grayscale(1);
}

.cabecalho-estrategia {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cabecalho-estrategia .titulos {
    margin: 0;
}

.teste-numero .cabecalho-estrategia {
    grid-template-columns: 1fr auto;
}

.grupos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.grupo {
    display: flex;
    flex-direction: column;
    background: var(--cartao);
    border-radius: var(--raio-p);
    overflow: hidden;
    box-shadow: var(--sombra);
    text-align: center;
}

.grupo .titulo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    transition: background .25s;
}

.grupo .titulo h2 {
    font-size: 16px;
    font-weight: 800;
}

.grupo .titulo p {
    font-size: 12px;
    font-weight: 700;
    opacity: .9;
}

/* Barra com a participação do grupo (--perc vem do scripts.js) */
.duzias .grupo .titulo::after,
.colunas .grupo .titulo::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--perc, 0%);
    height: 3px;
    background: rgba(255, 255, 255, .75);
    transition: width .4s ease;
}

.grupo .valor {
    padding: 10px 4px;
    font-size: 15px;
    font-weight: 700;
}

.entradas {
    background: var(--cartao-2);
    padding: 4px 2px;
    font-size: 11.5px;
    color: var(--texto-suave);
}

.nao_selecionado {
    background: var(--cinza);
}

.selecionado {
    background: var(--verde) !important;
}

/* Cartão inteiro destacado quando é para apostar */
.grupo:has(.selecionado) {
    box-shadow: 0 0 0 2px var(--verde), var(--sombra);
}

.grupo:has(.selecionado) .valor {
    color: var(--verde);
}

.operacoes .titulo {
    justify-content: center;
    background: var(--cartao-2);
    color: var(--azul);
}

/* O total é o número que importa: ganha o destaque */
.operacoes .grupo:last-child .titulo {
    background: var(--azul);
    color: #fff;
}

.operacoes .grupo:last-child .valor {
    color: var(--azul);
}

/* ---------- Chaves (liga/desliga e modos) ---------- */

.button-container {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.button-container .button {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 22px;
    border: 3px solid var(--verde);
    transition: border-color .25s;
}

.button-container .button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--verde);
    transform: translateY(-50%);
    transition: left .25s, background .25s;
}

.button-container.on .button {
    border-color: var(--azul);
}

.button-container.on .button::before {
    left: 19px;
    background: var(--azul);
}

.button-container .text {
    font-weight: 800;
    font-size: 13px;
    color: var(--verde);
    white-space: nowrap;
}

.button-container.on .text {
    color: var(--azul);
}

.button-container:not(.on) .text .on,
.button-container.on .text .off {
    display: none;
}

/* Liga/desliga: vermelho desligado, verde ligado */
.button-container.liga .button {
    border-color: var(--vermelho);
}

.button-container.liga .button::before {
    background: var(--vermelho);
}

.button-container.liga.on .button {
    border-color: var(--verde);
}

.button-container.liga.on .button::before {
    background: var(--verde);
}

/* ---------- Importação ---------- */

.teste-numero {
    background: var(--cartao);
    border-radius: var(--raio);
    padding: 14px;
    box-shadow: var(--sombra);
}

.ajuda {
    font-size: 12.5px;
    color: var(--texto-suave);
    margin-bottom: 10px;
}

.ajuda:empty {
    display: none;
}

#statusImportacao {
    margin: 10px 0 0;
    color: var(--azul);
    font-weight: 600;
}

.linha-importacao {
    display: flex;
    gap: 8px;
}

.linha-importacao textarea {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 10px 14px;
    resize: none;
    border: 1px solid var(--borda);
    border-radius: 21px;
    background: var(--app);
    color: var(--texto);
    font: inherit;
    font-size: 14px;
    outline: none;
    overflow: hidden;
}

.linha-importacao textarea:focus {
    border-color: var(--azul);
}

.linha-importacao .enviar {
    padding: 0 18px;
    border: none;
    border-radius: 21px;
    background: var(--azul);
    color: #fff;
    font-weight: 700;
}

/* ---------- Link do guia ---------- */

.link-guia {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 18px;
    padding: 12px;
    border: 1px dashed var(--borda);
    border-radius: var(--raio);
    background: transparent;
    color: var(--azul);
    font-weight: 700;
}

/* ---------- Guia da estratégia ---------- */

.guia {
    width: min(420px, 100vw);
    max-width: 100vw;
    max-height: 100dvh;
    margin: auto auto 0;
    padding: 0;
    border: none;
    border-radius: 22px 22px 0 0;
    background: var(--app);
    color: var(--texto);
    box-shadow: 0 -6px 30px rgba(0, 0, 0, .6);
}

@media (min-width: 460px) {
    .guia {
        margin: auto;
        max-height: 90vh;
        border-radius: 22px;
    }
}

.guia::backdrop {
    background: rgba(0, 0, 0, .65);
}

.guia[open] {
    display: flex;
    flex-direction: column;
    animation: subir .25s ease-out;
}

@keyframes subir {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.guia-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 10px;
    border-bottom: 1px solid var(--borda);
}

.guia-topo h2 {
    font-size: 20px;
    font-weight: 800;
}

.guia-conteudo {
    overflow-y: auto;
    padding: 6px 16px calc(20px + env(safe-area-inset-bottom));
    font-size: 14px;
}

.guia details {
    border-bottom: 1px solid var(--borda);
    padding: 4px 0;
}

.guia summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    list-style: none;
}

.guia summary::-webkit-details-marker {
    display: none;
}

.guia summary i {
    width: 18px;
    color: var(--azul);
    text-align: center;
}

.guia summary::after {
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: auto;
    font-size: 11px;
    color: var(--texto-suave);
    transition: transform .2s;
}

.guia details[open] summary::after {
    transform: rotate(180deg);
}

.guia ol,
.guia ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.guia li {
    margin-bottom: 6px;
}

.guia details > p {
    margin-bottom: 10px;
    color: var(--texto-suave);
}

.tag-verde {
    padding: 0 6px;
    border-radius: 6px;
    background: var(--verde);
    color: #fff;
    font-weight: 700;
}

.subtitulo-guia {
    margin: 6px 0 8px !important;
    color: var(--texto) !important;
    font-weight: 700;
}

.abas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.aba {
    flex: none;
    padding: 6px 12px;
    border: 1px solid var(--borda);
    border-radius: 20px;
    background: transparent;
    color: var(--texto-suave);
    font-size: 13px;
    font-weight: 700;
}

.aba.ativa {
    border-color: var(--azul);
    background: var(--azul);
    color: #fff;
}

.painel {
    display: none;
}

.painel.ativo {
    display: block;
}

.painel > p {
    margin-bottom: 10px;
    color: var(--texto-suave);
}

.resumo-guia {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}

.resumo-guia div {
    padding: 8px 6px;
    border-radius: var(--raio-p);
    background: var(--cartao);
    text-align: center;
}

.resumo-guia span {
    display: block;
    font-size: 10.5px;
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.resumo-guia strong {
    font-size: 14px;
}

.tabela-rolagem {
    overflow-x: auto;
    margin-bottom: 14px;
    border-radius: var(--raio-p);
    background: var(--cartao);
}

.tabela-guia {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tabela-guia th,
.tabela-guia td {
    padding: 6px 7px;
    text-align: right;
}

.tabela-guia th:first-child,
.tabela-guia td:first-child {
    text-align: center;
}

.tabela-guia thead th {
    position: sticky;
    top: 0;
    background: var(--cartao-2);
    color: var(--texto-suave);
    font-weight: 700;
}

.tabela-guia tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, .03);
}

.tabela-guia .pos { color: var(--verde); font-weight: 700; }
.tabela-guia .neg { color: var(--vermelho); font-weight: 700; }

.aviso-guia {
    margin: 14px 0 4px;
    padding: 10px 12px;
    border-radius: var(--raio-p);
    background: rgba(255, 90, 31, .12);
    color: #ffb08f;
    font-size: 12.5px;
}

/* ---------- Telas bem estreitas ---------- */

@media (max-width: 360px) {
    .container { padding-left: 10px; padding-right: 10px; }
    .bola { width: 38px; height: 38px; font-size: 16px; }
    .box-ultimos strong { left: calc(50% - 25px); }
    .grupo .valor { font-size: 13px; }
    .button-container .text { font-size: 12px; }
}