/* app.css — telas de entrada e painel (login, lobby).
   Separado do style.css de propósito: aquele é do jogo e trava a rolagem
   (body { overflow:hidden; height:100% }), o que quebraria páginas normais. */

:root {
    --bq-verde:        #1b5e20;
    --bq-verde-claro:  #2e7d32;
    --bq-verde-escuro: #123d16;
    --bq-dourado:      #ffc107;
    --bq-madeira:      #4e342e;
    --bq-painel:       #ffffff;
    --bq-texto-suave:  #6c757d;
}

/* O feltro é a identidade do projeto — é a mesma textura da mesa do jogo.
   Ele já é escuro (rgb(0,85,9), luminância ~20%), então texto branco lê bem
   direto sobre ele. O véu abaixo é leve, só para uniformizar as manchas da
   foto e dar contraste onde a textura clareia. */
body {
    min-height: 100vh;
    background-color: var(--bq-verde-escuro); /* cobre antes da imagem carregar */
    background-image:
        linear-gradient(rgba(0, 0, 0, .18), rgba(0, 0, 0, .32)),
        url('../img/feltro.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* background-attachment: fixed é caro em telas de toque — vira repaint a cada
   rolagem no iOS/Android. Na largura de celular, deixa a imagem rolar junto. */
@media (max-width: 991.98px) {
    body { background-attachment: scroll; }
}

/* ============================== ENTRADA (index) ============================== */

.entrada-logo {
    max-width: 190px;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .55));
}

.card-entrada {
    background: var(--bq-painel);
    border: none;
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
    height: 100%;
}

.card-entrada .card-header {
    border-radius: 14px 14px 0 0 !important;
    border: none;
    padding: 1rem 1.25rem;
    font-weight: 600;
    letter-spacing: .3px;
}

.header-login    { background: var(--bq-verde-claro); color: #fff; }
.header-cadastro { background: var(--bq-madeira);     color: #fff; }

.form-label {
    font-weight: 600;
    font-size: .875rem;
    margin-bottom: .3rem;
}

.opcional {
    font-weight: 400;
    font-size: .78rem;
    color: var(--bq-texto-suave);
}

/* ============================== PAINEL (lobby) ============================== */

#painel {
    display: flex;
    min-height: 100vh;
}

/* --- Menu lateral --- */

#menu-lateral {
    width: 250px;
    flex-shrink: 0;
    background: var(--bq-verde-escuro);
    background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .45)), url('../img/table-glass.jpg');
    background-size: cover;
    color: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 18px rgba(0, 0, 0, .4);
}

.menu-topo {
    padding: 1.1rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    text-align: center;
}

.menu-topo img { max-width: 120px; }

.menu-usuario {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.menu-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bq-dourado);
    color: #3b2a00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.menu-usuario .nome {
    font-weight: 600;
    line-height: 1.15;
    word-break: break-word;
}

.menu-usuario .zap {
    font-size: .75rem;
    color: rgba(255, 255, 255, .65);
}

.menu-secao {
    padding: .9rem 1rem .3rem;
    font-size: .68rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

#menu-lateral .nav-link {
    color: rgba(255, 255, 255, .85);
    border-radius: 8px;
    margin: 2px .55rem;
    padding: .55rem .75rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .93rem;
    transition: background .15s, color .15s;
}

#menu-lateral .nav-link i { font-size: 1.05rem; width: 1.3rem; text-align: center; }

#menu-lateral .nav-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }

#menu-lateral .nav-link.ativo {
    background: var(--bq-dourado);
    color: #3b2a00;
    font-weight: 600;
}

#menu-lateral .nav-link .badge { margin-left: auto; }

.menu-rodape {
    margin-top: auto;
    padding: .6rem 0 1rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

/* --- Conteúdo --- */

#conteudo {
    flex: 1;
    padding: 1.6rem 1.8rem 2.5rem;
    min-width: 0; /* deixa o conteúdo encolher em telas estreitas */
}

.titulo-pagina {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

.subtitulo-pagina {
    color: rgba(255, 255, 255, .7);
    font-size: .92rem;
}

/* --- Cards de sala --- */

.card-sala {
    background: var(--bq-painel);
    border: none;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    transition: transform .15s, box-shadow .15s;
    height: 100%;
}

.card-sala:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .38);
}

.sala-status {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.pilha-avatares { display: flex; align-items: center; }

.avatar-jogador {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bq-verde-claro);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    border: 2px solid #fff;
    margin-right: -9px;
}

.avatar-jogador.vago {
    background: #e9ecef;
    color: #adb5bd;
    border-style: dashed;
    border-color: #ced4da;
    font-weight: 400;
}

.card-nova-sala {
    border: 2px dashed rgba(255, 255, 255, .4);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .85);
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    height: 100%;
}

.card-nova-sala:hover {
    background: rgba(255, 255, 255, .13);
    border-color: var(--bq-dourado);
    color: #fff;
}

/* --- Aviso de área em construção --- */

.faixa-placeholder {
    background: rgba(255, 193, 7, .14);
    border: 1px solid rgba(255, 193, 7, .4);
    color: #ffe082;
    border-radius: 10px;
    padding: .65rem 1rem;
    font-size: .87rem;
}

/* ============================== Telas estreitas ============================== */

@media (max-width: 991.98px) {
    /* Barra compacta do celular. O menu fica RECOLHIDO por padrao: assim o
       conteudo comeca no topo e ninguem precisa rolar para achar o que
       clicou. Tentar resolver isso rolando a pagina depois do carregamento
       disputava com imagem e fonte, e sempre escapava um caso. */
    .barra-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .5rem .9rem;
        gap: .75rem;
    }

    .barra-mobile .marca img { height: 42px; width: auto; display: block; }

    .btn-abrir-menu {
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .3);
        border-radius: 8px;
        padding: .3rem .65rem;
        line-height: 1;
    }

    .btn-abrir-menu i { font-size: 1.6rem; }
    .btn-abrir-menu:hover, .btn-abrir-menu:focus { color: var(--bq-dourado); border-color: var(--bq-dourado); }

    #painel { flex-direction: column; }

    #menu-lateral {
        width: 100%;
        flex-direction: column;
    }

    /* Logo menor: no celular o menu fica ACIMA do conteudo, e cada pixel dele
       empurra a pagina para baixo. */
    .menu-topo { padding: .7rem 1rem; }
    .menu-topo img { max-width: 88px; }

    .menu-usuario { padding: .7rem 1rem; }

    /* Duas colunas, alinhado a ESQUERDA e com fonte maior: item centralizado
       fica dificil de mirar, e a fonte de 0.93rem era pequena para o toque. */
    /* O !important e necessario: o <ul> traz a classe .flex-column do
       Bootstrap, que ja usa !important. Sem isto a regra abaixo perde e o
       menu continua em coluna unica. */
    #menu-lateral .nav { flex-direction: row !important; flex-wrap: wrap; }

    /* O filho flex e o <li>, nao o <a>: por isso a largura vai no .nav-item.
       Duas colunas cortam a altura do menu pela metade, e no celular ele
       fica ACIMA do conteudo -- cada pixel dele empurra a pagina. */
    #menu-lateral .nav-item { flex: 1 1 46%; }

    #menu-lateral .nav-link {
        justify-content: flex-start;
        font-size: 1.02rem;
        padding: .7rem .85rem;
    }

    #menu-lateral .nav-link i { font-size: 1.2rem; }

    .menu-secao { display: none; }
    .menu-rodape { margin-top: 0; }

    #conteudo {
        padding: 1.1rem;
        /* Alvo do rolamento automatico; a margem evita colar no topo. */
        scroll-margin-top: .5rem;
    }
}

/* ---------------- Confirmação de cadastro por código (WhatsApp) ------------- */

.aviso-codigo {
    background: rgba(37, 211, 102, .1);
    border: 1px solid rgba(37, 211, 102, .35);
    border-radius: 10px;
    padding: .7rem .9rem;
    font-size: .9rem;
    color: #146c43;
}

.aviso-codigo .bi-whatsapp { color: #25d366; }

/* O código é curto e precisa ser conferido de relance: espaçado e monoespaçado. */
.campo-codigo {
    letter-spacing: .55em;
    text-align: center;
    font-family: 'Consolas', 'SF Mono', ui-monospace, monospace;
    font-weight: 600;
}

.campo-codigo::placeholder {
    letter-spacing: .55em;
    opacity: .35;
}

/* Campos travados durante a confirmação: continuam legíveis, mas sem
   parecerem editáveis. O disabled do Bootstrap sozinho apaga demais. */
.campos-travados {
    opacity: .72;
}

.campos-travados .form-control:disabled,
.campos-travados .form-control[readonly] {
    background-color: #f1f3f5;
    color: #495057;
}

/* ------------------------- Lobby ligado no banco -------------------------- */

/* Faixa "voce esta em" — atalho para voltar a uma mesa sem procurar na lista */
.faixa-minhas {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    padding: .65rem 1rem;
    font-size: .9rem;
    color: rgba(255, 255, 255, .9);
}

.link-minha-mesa {
    color: var(--bq-dourado);
    text-decoration: none;
    font-weight: 600;
    margin-left: .4rem;
    white-space: nowrap;
}

.link-minha-mesa:hover { text-decoration: underline; color: #ffd451; }

/* O proprio jogador se destaca entre os avatares da mesa */
.avatar-jogador.sou-eu {
    background: var(--bq-dourado);
    color: #3b2a00;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, .45);
}

/* --------------------------- Convites de mesa ----------------------------- */

/* Faixa na tela de entrada, para quem chegou por link de convite */
.faixa-convite {
    max-width: 640px;
    background: rgba(255, 193, 7, .14);
    border: 1px solid rgba(255, 193, 7, .45);
    border-radius: 10px;
    padding: .75rem 1.1rem;
    color: #ffe082;
    text-align: center;
    font-size: .93rem;
}

#convite-link { font-size: .84rem; }

/* ==================== Páginas do painel (ranking, histórico...) ============ */

.card-painel {
    background: var(--bq-painel);
    border: none;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    overflow: hidden;
}

.card-painel .table thead th {
    background: #f6f7f9;
    border-bottom: 2px solid #e6e8eb;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--bq-texto-suave);
    white-space: nowrap;
}

/* A linha do próprio jogador precisa saltar sem depender de cor sozinha */
.linha-eu { background: rgba(255, 193, 7, .1) !important; }
.linha-eu td { font-weight: 600; }

/* --- Cartões de número (resumo do histórico) --- */

.card-numero {
    background: var(--bq-painel);
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    height: 100%;
}

.card-numero .bi { font-size: 1.1rem; color: var(--bq-texto-suave); }
.card-numero .numero { font-size: 1.6rem; font-weight: 700; line-height: 1.15; }
.card-numero .rotulo {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--bq-texto-suave);
}

/* --- Estado vazio --- */

.vazio-painel {
    background: rgba(255, 255, 255, .08);
    border: 2px dashed rgba(255, 255, 255, .28);
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: rgba(255, 255, 255, .85);
}

.vazio-painel .bi { font-size: 2.6rem; opacity: .55; }
.vazio-painel p { color: rgba(255, 255, 255, .7); max-width: 460px; margin: 0 auto; }

/* --- Página de regras --- */

.lista-regras { padding-left: 1.15rem; margin-bottom: 0; }
.lista-regras li { margin-bottom: .45rem; line-height: 1.5; }
.lista-regras.numerada li { margin-bottom: .6rem; }

.grade-pontos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: .4rem;
}

.ponto-carta {
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    padding: .35rem .2rem;
    text-align: center;
    background: #fbfbfc;
}

.ponto-carta.curinga {
    border-color: var(--bq-dourado);
    background: rgba(255, 193, 7, .13);
}

.ponto-carta .carta { font-weight: 700; font-size: 1rem; }
.ponto-carta .pontos { font-size: .75rem; color: var(--bq-texto-suave); }

.destaque-regra {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    background: rgba(46, 125, 50, .09);
    border-left: 3px solid var(--bq-verde-claro);
    border-radius: 8px;
    padding: .7rem .9rem;
    line-height: 1.5;
}

.destaque-regra .bi { font-size: 1.15rem; color: var(--bq-verde-claro); flex-shrink: 0; margin-top: .1rem; }

.destaque-regra.destaque-forte {
    background: rgba(255, 193, 7, .14);
    border-left-color: var(--bq-dourado);
}

.destaque-regra.destaque-forte .bi { color: #c79100; }

/* --- Perfil --- */

.menu-avatar.avatar-grande {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
}

/* ======================== Sala de espera (dentro da mesa) ================== */

#sala-espera {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}

.painel-espera {
    width: 100%;
    max-width: 480px;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    padding: 1.75rem;
    color: #fff;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
    backdrop-filter: blur(3px);
}

.espera-logo { max-width: 130px; }

/* As cadeiras mostram de relance quantos faltam */
.cadeiras {
    display: flex;
    justify-content: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.cadeira { text-align: center; width: 74px; }

.cadeira .avatar-jogador {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
    margin: 0 auto .35rem;
}

.cadeira .nome {
    font-size: .78rem;
    color: rgba(255, 255, 255, .8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cadeira.vazia .nome { color: rgba(255, 255, 255, .4); font-style: italic; }
.cadeira.vazia .avatar-jogador { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .45); }

/* Voz na sala de espera -----------------------------------------------------
   A marca de quem esta falando existia so no style.css, do tabuleiro. A sala
   de espera usa o app.css, entao precisa da sua propria. */

.cadeira.speaking .avatar-jogador {
    box-shadow: 0 0 0 3px #0d6efd, 0 0 16px #0d6efd;
    transition: box-shadow .1s;
}

.bloco-voz {
    display: flex;
    align-items: center;
    gap: .8rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    padding: .7rem .9rem;
}

.btn-mic {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    padding: 0;
}

.texto-voz { min-width: 0; }
.texto-voz strong { color: #fff; font-size: .92rem; }

#sala-espera #convite-link {
    background: rgba(255, 255, 255, .92);
    font-size: .82rem;
}

/* ========================= Lista de jogadores ============================== */
/* Sem tabela: no celular 4 colunas ou estouram a largura ou espremem tudo.
   Cada pessoa e uma linha que vira bloco em tela estreita. */

.lista-jogadores {
    background: var(--bq-painel);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    overflow: hidden;
}

.jogador {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid #eef0f2;
}

.jogador:last-child { border-bottom: none; }

.jogador .avatar-jogador {
    width: 42px;
    height: 42px;
    font-size: .95rem;
    margin-right: 0;
    flex-shrink: 0;
}

.jogador .identificacao { flex: 1 1 auto; min-width: 0; }

.jogador .nome {
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jogador .acesso {
    font-size: .78rem;
    color: var(--bq-texto-suave);
    margin-top: .1rem;
}

.marca-voce {
    background: rgba(255, 193, 7, .25);
    color: #7a5b00;
    border-radius: 4px;
    padding: 0 .35rem;
    margin-left: .35rem;
    font-weight: 600;
}

.jogador .numeros {
    display: flex;
    gap: 1.3rem;
    flex-shrink: 0;
    text-align: center;
}

.jogador .numero .valor {
    display: block;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.1;
}

.jogador .numero .rotulo {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--bq-texto-suave);
}

.sou-eu-linha { background: rgba(255, 193, 7, .09); }

/* Telas estreitas: os numeros descem para baixo do nome, alinhados a esquerda,
   em vez de disputar largura com ele. */
@media (max-width: 575.98px) {
    .jogador {
        flex-wrap: wrap;
        row-gap: .5rem;
    }

    .jogador .identificacao { flex: 1 1 auto; }

    .jogador .numeros {
        flex-basis: 100%;
        justify-content: flex-start;
        gap: 1.8rem;
        padding-left: calc(42px + .9rem); /* alinha com o nome, nao com o avatar */
    }

    .jogador .numero { text-align: left; }
}

/* Bolinha da cor da canastra, na pagina de Regras. As cores sao as mesmas do
   style.css do tabuleiro; se mudar la, mude aqui. */
.marca-canastra {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    margin-right: .3rem;
    vertical-align: baseline;
}

.marca-canastra.real  { background: #2196f3; }
.marca-canastra.royal { background: #9c27b0; }

/* ========================= Foto de perfil ================================== */

/* A foto entra como background do MESMO elemento que antes mostrava a inicial,
   entao tamanho, borda e a marca de "sou eu" continuam valendo sem mudanca. */
.avatar-jogador.com-foto,
.menu-avatar.com-foto {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: transparent;   /* sem isto, um texto solto apareceria por cima */
}

/* O botao da camera, grudado no canto da foto grande */
.foto-perfil { position: relative; flex-shrink: 0; }

.foto-perfil .troca-foto {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

/* --- janela do recorte ---------------------------------------------------- */

/* Quadrada e fixa: o que se escolhe e o pedaco da foto, nunca o formato. */
.janela-recorte {
    width: 280px;
    height: 280px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    background: #e9ecef;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12);
}

.janela-recorte canvas {
    display: block;
    cursor: grab;
    touch-action: none;   /* o arrasto e nosso: sem isto o dedo rola a pagina */
}

.janela-recorte canvas:active { cursor: grabbing; }

/* Telas estreitas: a janela acompanha a largura disponivel. */
@media (max-width: 400px) {
    .janela-recorte { width: 240px; height: 240px; }
}