/* Bisazen: estilos do jogo. Pensado primeiro para o celular; acima de 1000px, três colunas. */
:root {
    color-scheme: light;
    --fundo: #f4efe6;
    --superficie: #fffdf9;
    --superficie-2: #efe8db;
    --tinta: #1d2733;
    --tinta-fraca: #5d6875;
    --linha: #d9d0c1;
    --marca: #0f766e;
    --marca-forte: #0b5c56;
    --marca-texto: #ffffff;
    --destaque: #f59e0b;
    --destaque-suave: #fde9b8;
    --cursor: #f59e0b;
    --erro: #b42318;
    --erro-fundo: #fde8e6;
    --casa: #ffffff;
    --casa-borda: #1d2733;
    --chat-fundo: #e9e2d4;
    --balao: #ffffff;
    --balao-meu: #cdeee3;
    --tique: #1877c9;
    --sobre-cor: #ffffff;
    --j0: #0f766e; --j1: #c2410c; --j2: #6d28d9; --j3: #be185d;
    --j4: #1d4ed8; --j5: #4d7c0f; --j6: #a16207; --j7: #0e7490;
    --raio: 12px;
    --sombra: 0 1px 2px rgb(29 39 51 / .08), 0 6px 18px rgb(29 39 51 / .07);
}

/* Tema escuro: escolhido no perfil (data-tema) ou, no automático, seguindo o aparelho. Os dois blocos precisam ser iguais. */
:root[data-tema="escuro"] {
    color-scheme: dark;
    --fundo: #12181f;
    --superficie: #1b232c;
    --superficie-2: #252f3a;
    --tinta: #edf1f5;
    --tinta-fraca: #a4afbb;
    --linha: #36424f;
    --marca: #2dd4bf;
    --marca-forte: #5eead4;
    --marca-texto: #06241f;
    --destaque-suave: #5c4413;
    --erro: #ff9c92;
    --erro-fundo: #45201c;
    --casa: #eef1f4;
    --casa-borda: #0a0e12;
    --chat-fundo: #151c24;
    --balao: #252f3a;
    --balao-meu: #14504a;
    --tique: #6cc1ff;
    --sobre-cor: #10161c;
    --j0: #2dd4bf; --j1: #fb923c; --j2: #a78bfa; --j3: #f472b6;
    --j4: #60a5fa; --j5: #a3e635; --j6: #facc15; --j7: #22d3ee;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema]) {
        color-scheme: dark;
        --fundo: #12181f;
        --superficie: #1b232c;
        --superficie-2: #252f3a;
        --tinta: #edf1f5;
        --tinta-fraca: #a4afbb;
        --linha: #36424f;
        --marca: #2dd4bf;
        --marca-forte: #5eead4;
        --marca-texto: #06241f;
        --destaque-suave: #5c4413;
        --erro: #ff9c92;
        --erro-fundo: #45201c;
        --casa: #eef1f4;
        --casa-borda: #0a0e12;
        --chat-fundo: #151c24;
        --balao: #252f3a;
        --balao-meu: #14504a;
        --tique: #6cc1ff;
        --sobre-cor: #10161c;
        --j0: #2dd4bf; --j1: #fb923c; --j2: #a78bfa; --j3: #f472b6;
        --j4: #60a5fa; --j5: #a3e635; --j6: #facc15; --j7: #22d3ee;
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--fundo);
    color: var(--tinta);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
}

body { display: flex; flex-direction: column; min-height: 100dvh; }

h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1.15; margin: 0 0 .6rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 1.1rem 0 .5rem; }
h2:first-child { margin-top: 0; }
p { margin: 0 0 .8rem; }
button { font: inherit; color: inherit; touch-action: manipulation; }
button:not(:disabled) { cursor: pointer; }
:focus-visible { outline: 3px solid var(--destaque); outline-offset: 2px; }

/* Topo */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; background: var(--superficie); border-bottom: 1px solid var(--linha); }
.marca { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.marca img { display: block; width: auto; height: 32px; }
.marca-escura { display: none !important; }
:root[data-tema="escuro"] .marca-clara { display: none !important; }
:root[data-tema="escuro"] .marca-escura { display: block !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema]) .marca-clara { display: none !important; }
    :root:not([data-tema]) .marca-escura { display: block !important; }
}
.topo-usuario { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topo-usuario form { margin: 0; }
.topo-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34vw; }
.link-discreto { background: none; border: 0; padding: 0; color: var(--marca-forte); text-decoration: underline; text-underline-offset: 2px; font-size: .92rem; white-space: nowrap; }

.conteudo { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Elementos gerais */
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra); }
.pagina-estreita { width: min(460px, 100% - 32px); margin: 24px auto; display: flex; flex-direction: column; gap: 16px; }
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px; border: 1px solid transparent; border-radius: 10px; background: var(--marca); color: var(--marca-texto); font-weight: 650; text-decoration: none; white-space: nowrap; }
.botao:hover:not(:disabled) { filter: brightness(1.08); }
.botao:disabled { opacity: .5; }
.botao-secundario { background: transparent; color: var(--marca-forte); border-color: var(--marca); }
.botao-largo { width: 100%; margin-top: 12px; }
.botao-icone { display: inline-grid; place-items: center; min-width: 36px; min-height: 36px; padding: 0; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 8px; font-size: 1.05rem; }
.botao-icone:disabled { opacity: .45; }
.rotulo { display: block; margin: 10px 0 4px; font-weight: 600; font-size: .92rem; }
.campo { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie); color: var(--tinta); font: inherit; }
.texto-fraco { color: var(--tinta-fraca); font-size: .92rem; }
.sobretitulo { margin: 0 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--marca-forte); }
.aviso-erro { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--erro-fundo); color: var(--erro); font-size: .94rem; }
.carregando { margin: 48px auto; color: var(--tinta-fraca); }
.separador { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--tinta-fraca); font-size: .85rem; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.separador:empty { gap: 0; }
.linha-formulario { display: flex; gap: 8px; }
.campo-codigo { text-transform: uppercase; letter-spacing: .14em; font-weight: 650; min-width: 0; }

.seletor-nivel { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
.seletor-nivel button { min-height: 44px; border: 0; background: transparent; font-weight: 600; }
.seletor-nivel button + button { border-left: 1px solid var(--linha); }
.seletor-nivel button.ativo { background: var(--marca); color: var(--marca-texto); }

/* Capa */
.capa { width: min(1040px, 100% - 32px); margin: clamp(20px, 6vh, 64px) auto; display: grid; gap: 24px; align-items: start; }
.capa-regras { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.capa-regras li { padding-left: 14px; border-left: 3px solid var(--destaque); }
@media (min-width: 800px) { .capa { grid-template-columns: 1.15fr 1fr; gap: 48px; } }
.link-formulario { margin: 12px 0 0; text-align: center; }

/* Menu do usuário */
.menu-usuario { position: relative; min-width: 0; }
.menu-usuario summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; border-radius: 8px; }
.menu-usuario summary::-webkit-details-marker { display: none; }
.menu-seta { color: var(--tinta-fraca); font-size: .8rem; }
.menu-opcoes { position: absolute; top: 100%; right: 0; z-index: 40; display: flex; flex-direction: column; min-width: 190px; padding: 6px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; box-shadow: var(--sombra); }
.menu-opcoes form { margin: 0; }
.menu-opcoes a, .menu-opcoes button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; }
.menu-opcoes a:hover, .menu-opcoes button:hover { background: var(--superficie-2); }

/* Abas de entrada e do grupo */
.abas-entrar { grid-template-columns: repeat(var(--opcoes), 1fr); margin-bottom: 16px; }
.abas-entrar a { display: grid; place-items: center; min-height: 44px; padding: 0 4px; color: inherit; font-size: .92rem; font-weight: 600; text-decoration: none; }
.abas-entrar a + a { border-left: 1px solid var(--linha); }
.abas-entrar a.ativo { background: var(--marca); color: var(--marca-texto); }
.abas-inicio { flex: none; width: min(460px, 100% - 32px); margin: 16px auto 0; }
.titulo-aba { font-size: 1.25rem; }
.abas-grupo { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.abas-grupo button { padding: 4px; font-size: .92rem; }
.convite-titulo { margin-top: 18px; }
.capa-acoes h2 { margin-bottom: 2px; }
.capa-acoes .texto-fraco { margin-bottom: 8px; }
.capa-acoes .botao-largo { margin-top: 8px; }


/* Perfil */
.topo-perfil { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: inherit; text-decoration: none; }
.topo-perfil:hover .topo-nome { text-decoration: underline; }
.avatar.avatar-topo { width: 28px; height: 28px; font-size: .85rem; background: var(--marca); }
.avatar.avatar-grande { width: 96px; height: 96px; font-size: 2.2rem; background: var(--marca); }
.perfil-foto { display: flex; align-items: center; gap: 16px; }
.perfil-foto-acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.perfil-foto-acoes form { margin: 0; }
.perfil-foto-acoes label { cursor: pointer; }
.perfil-email { margin: 12px 0 0; overflow-wrap: anywhere; }
.aviso-chamada { position: fixed; top: 12px; left: 50%; z-index: 60; width: min(360px, calc(100vw - 24px)); transform: translateX(-50%); padding: 14px 16px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.aviso-chamada p { margin: 0 0 10px; }
.aviso-chamada-acoes { display: flex; gap: 8px; }
.aviso-chamada-acoes .botao { flex: 1; text-align: center; text-decoration: none; }
.conversa-video { display: block; width: 100vw; height: 100dvh; border: 0; background: #1B2A41; }
.conversa-estado { display: grid; min-height: 100dvh; place-items: center; padding: 16px; }
.conversa-estado .cartao { width: min(420px, 100%); text-align: center; }
.membro-video { color: inherit; text-decoration: none; }
.membro-video strong { text-decoration: underline; }
.campo-verificacao { text-align: center; font-size: 1.5rem; font-weight: 650; letter-spacing: .25em; }
.opcao-confiar { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 4px; cursor: pointer; }
.opcao-confiar input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--marca); }
.opcao-confiar small { display: block; margin-top: 2px; }
.versao { margin: 16px 0; color: var(--tinta-fraca); font-size: .8rem; text-align: center; }
.arquivo-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; }
.arquivo-oculto:focus-visible + *, label:has(+ .arquivo-oculto:focus-visible) { outline: 3px solid var(--destaque); outline-offset: 2px; }
.aviso-ok { margin: 0 0 10px; padding: 10px 12px; border-left: 4px solid var(--marca); border-radius: 6px; background: var(--superficie-2); font-size: .94rem; }

/* Grupos */
.lista-grupos, .lista-palavras { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.lista-grupos a { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px; color: inherit; text-decoration: none; }
.lista-grupos a:hover { background: var(--superficie-2); }
.lista-grupos small, .lista-palavras small { display: block; color: var(--tinta-fraca); font-size: .84rem; overflow-wrap: anywhere; }
.lista-palavras li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.lista-palavras li > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.pagina-admin { width: min(760px, 100% - 32px); margin: 24px auto; }
.admin-totais { margin-bottom: 12px; }
.admin-busca { display: flex; gap: 8px; margin-bottom: 12px; }
.admin-busca .campo { flex: 1; min-width: 0; }
.admin-busca .botao { flex: none; }
.admin-email { overflow-wrap: anywhere; }
.admin-situacao { flex: none; white-space: nowrap; color: var(--tinta-fraca); }
.lista-contatos { list-style: none; margin: 0; padding: 0; }
.lista-contatos li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.lista-contatos li:last-child { border-bottom: 0; }
.item-conversa { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none; }
.item-conversa:hover .placar-nome > span:first-child { text-decoration: underline; }
.item-conversa .placar-nome > span:first-child .status { margin-left: 3px; }
.item-previa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-hora { flex: none; color: var(--tinta-fraca); font-size: .74rem; font-variant-numeric: tabular-nums; }
.contador { flex: none; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--marca); color: var(--marca-texto); font-size: .74rem; font-weight: 700; }
.topo-direita { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topo-conversas { flex: none; display: inline-flex; align-items: center; gap: 4px; min-width: 44px; min-height: 44px; justify-content: center; color: inherit; text-decoration: none; }
.conversa-particular { flex: 1; min-height: 0; display: flex; width: min(720px, 100%); height: calc(100dvh - 54px); margin: 0 auto; }
.conversa-particular .chat { flex: 1; border-radius: 0; border-width: 0 1px; }
.conversa-topo { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--superficie); border-bottom: 1px solid var(--linha); }
.conversa-topo .link-discreto { flex: none; min-height: 44px; }
.conversa-voltar { flex: none; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: inherit; font-size: 1.5rem; text-decoration: none; }
.conversa-anteriores { align-self: center; min-height: 44px; }
.conversa-fechada { margin: 0; padding: 12px; background: var(--superficie); border-top: 1px solid var(--linha); color: var(--tinta-fraca); font-size: .9rem; text-align: center; }
.acoes-linha { display: flex; gap: 12px; flex: none; }
.aviso-seguranca { padding: 8px 10px; border-left: 4px solid var(--destaque); border-radius: 6px; background: var(--destaque-suave); font-size: .88rem; }
.subtitulo-formulario { margin: 16px 0 0; font-size: 1rem; }
.sugestoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sugestao { padding: 4px 10px; border: 1px solid var(--linha); border-radius: 999px; background: transparent; font-size: .82rem; }
.sugestao:hover { background: var(--superficie-2); }
/* Cores fixas nos dois temas, conforme a identidade do botão do Google */
.botao-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 18px; border: 1px solid #747775; border-radius: 10px; background: #ffffff; color: #1f1f1f; font-weight: 600; }
.botao-google:hover { background: #f2f2f2; }
/* Modalidades de jogo na página inicial */
.modalidades { width: min(1040px, 100% - 32px); margin: clamp(16px, 4vh, 40px) auto; display: grid; gap: 16px; align-items: start; }
.modalidades > h1 { margin: 0; }
@media (min-width: 800px) { .modalidades { grid-template-columns: 1fr 1fr; gap: 24px; } .modalidades > h1 { grid-column: 1 / -1; } }
.modalidade h2 { margin-top: 0; }
.modalidade-dica { margin: 8px 0 0; }
.selo-em-breve { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: var(--destaque-suave); font-size: .76rem; font-weight: 650; vertical-align: middle; white-space: nowrap; }
.modalidade-mais { margin-top: 12px; border-top: 1px solid var(--linha); }
.modalidade-mais summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 650; color: var(--marca-forte); }
.modalidade-mais summary::before { content: "▸"; margin-right: 8px; }
.modalidade-mais[open] summary::before { content: "▾"; }
.modalidade-mais summary::-webkit-details-marker { display: none; }

/* Fotos do grupo. O corte usa o atributo hidden: não definir display no contêiner dele. */
.foto-jogar { margin-bottom: 12px; }
.foto-escolher { position: relative; cursor: pointer; }
.foto-escolher-off { opacity: .5; cursor: not-allowed; }
.foto-regra { margin: 8px 0 16px; font-size: .86rem; }
.foto-corte-tela { display: block; width: 100%; height: auto; margin-bottom: 12px; border-radius: 8px; background: var(--superficie-2); cursor: grab; touch-action: none; }
.foto-corte-tela:active { cursor: grabbing; }
.acoes-corte { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.grade-fotos { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grade-fotos li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.grade-fotos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--superficie-2); }
.grade-fotos small { color: var(--tinta-fraca); font-size: .84rem; overflow-wrap: anywhere; }

/* Quebra-cabeça */
.qc-tamanhos { margin: 12px 0; }
.qc-foto-final { display: block; width: 100%; border-radius: 8px; margin-bottom: 12px; }
.qc-pagina { width: min(900px, 100% - 16px); margin: 8px auto 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qc-topo { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 4px; font-size: .92rem; font-weight: 600; }
/* Cabe na tela sem rolagem, pela largura ou pela altura: o que estiver mais justo. */
.qc-area { position: relative; width: min(100%, calc((100dvh - 150px) * var(--foto-largura) / var(--foto-altura))); aspect-ratio: var(--foto-largura) / var(--foto-altura); }
.qc-tabuleiro { display: grid; width: 100%; height: 100%; grid-template-columns: repeat(var(--colunas), 1fr); grid-template-rows: repeat(var(--linhas), 1fr); background: var(--superficie-2); border-radius: 8px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.qc-peca { min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background-color: var(--superficie-2); background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75); cursor: grab; touch-action: none; }
.qc-peca:focus-visible { outline: 3px solid var(--destaque); outline-offset: -3px; }
.qc-no-lugar { box-shadow: none; cursor: default; }
.qc-selecionada { box-shadow: inset 0 0 0 3px var(--destaque); }
.qc-alvo { box-shadow: inset 0 0 0 3px var(--marca); filter: brightness(1.15); }
.qc-origem { opacity: .3; }
.qc-flutuante { position: fixed; z-index: 50; pointer-events: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); cursor: grabbing; }
.qc-foto-inteira { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

.jogar-agora { margin: 20px 0 8px; }
.botao-jogar { width: 100%; max-width: 380px; min-height: 64px; font-size: 1.3rem; border-radius: 14px; box-shadow: var(--sombra); }

/* Jogo individual: sem placar nem chat; uma faixa mostra o progresso */
.trilha { display: flex; align-items: center; gap: 10px; padding: 4px 12px; background: var(--superficie-2); font-size: .84rem; }
.trilha-etapa { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trilha-marcas { display: inline-flex; gap: 4px; }
.trilha-marcas i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--marca); }
.trilha-marcas i.feita { background: var(--marca); }
.trilha-marcas i.atual { border-color: var(--destaque); background: var(--destaque-suave); }
.trilha-pontos { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jogo-solo .abas-jogo { grid-template-columns: repeat(2, 1fr); }
.jogo-solo .tabuleiro { --tam: min(calc((100vw - 18px) / var(--colunas)), calc((100dvh - 510px + var(--folga-topo, 0px)) / var(--linhas)), 44px); }
.subiu-nivel { padding: 10px 12px; border-left: 4px solid var(--destaque); border-radius: 6px; background: var(--destaque-suave); }

/* Sala de espera */
.sala-espera { flex: 1; min-height: 0; display: flex; flex-direction: column; height: calc(100dvh - 54px); width: 100%; }
.espera-painel { flex: 1; min-height: 0; overflow: auto; border-width: 0; border-radius: 0; box-shadow: none; }
.espera-acao { position: sticky; bottom: -20px; margin: 12px -20px -20px; padding: 12px 20px; background: var(--superficie); border-top: 1px solid var(--linha); }
.espera-acao .botao-largo { margin-top: 0; }
.espera-acao .aviso-erro { margin: 0 0 8px; }
.sala-espera .chat { display: none; flex: 1; min-height: 0; border-width: 0; border-radius: 0; }
.sala-espera.aba-chat .espera-painel { display: none; }
.sala-espera.aba-chat .chat { display: flex; }
.abas-espera { grid-template-columns: repeat(2, 1fr); }
.convite { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.convite .campo { flex: 1 1 100%; font-size: .9rem; }



/* Partida: no celular, uma seção por vez */
.jogo { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; height: calc(100dvh - 54px); }
.jogo-barra { display: flex; align-items: center; gap: 8px; padding: 2px 8px; background: var(--superficie); border-bottom: 1px solid var(--linha); font-size: .9rem; }
/* Topo junto: o site sai da fila e só o menu do usuário fica, sobre o canto direito da barra do jogo. */
.jogo-topo-junto { --folga-topo: 54px; height: 100dvh; }
.jogo-solo.jogo-topo-junto { --folga-topo: 82px; }
.jogo-topo-junto .trilha { display: none; }
body:has(.jogo-topo-junto) .topo { position: fixed; top: 0; right: 0; z-index: 10; gap: 2px; padding: 2px 8px 2px 0; background: transparent; border: 0; }
body:has(.jogo-topo-junto) .marca, body:has(.jogo-topo-junto) .topo-nome, body:has(.jogo-topo-junto) .menu-seta { display: none; }
.jogo-topo-junto .jogo-barra { gap: 4px; padding-right: 44px; }
body:has(.topo-conversas) .jogo-topo-junto .jogo-barra { padding-right: 92px; }
.jogo-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-fraca); }
.relogio { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.relogio-fim { color: var(--erro); }
.progresso { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.progresso-barra { position: relative; display: block; width: 64px; height: 8px; border-radius: 4px; background: var(--superficie-2); }
.progresso-barra i { display: block; height: 100%; border-radius: 4px; background: var(--marca); transition: width .3s; }
.progresso-barra b { position: absolute; top: -2px; width: 2px; height: 12px; background: var(--destaque); }
.jogo-barra .botao-icone { min-width: 40px; min-height: 40px; border: 0; background: transparent; }
.botao-voltar { color: inherit; font-size: 1.5rem; line-height: 1; text-decoration: none; }

.painel { background: var(--superficie); overflow: auto; padding: 12px; }
.jogo-enunciados, .jogo-placar, .jogo-chat, .jogo-tabuleiro { display: none; flex: 1; min-height: 0; }
.aba-tabuleiro .jogo-tabuleiro { display: flex; }
.aba-enunciados .jogo-enunciados { display: block; }
.aba-placar .jogo-placar { display: block; }
.aba-chat .jogo-chat { display: flex; }

.jogo-tabuleiro { flex-direction: column; min-width: 0; }
.jogo-chat .chat { flex: 1; min-height: 0; border-radius: 0; border-width: 0; }

.abas-jogo { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--superficie); border-top: 1px solid var(--linha); padding-bottom: env(safe-area-inset-bottom); }
.abas-jogo button { position: relative; min-height: 46px; background: none; border: 0; border-top: 3px solid transparent; font-size: .88rem; font-weight: 600; color: var(--tinta-fraca); }
.abas-jogo button.ativo { color: var(--marca-forte); border-top-color: var(--marca); }
.selo { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 9px; background: var(--erro); color: var(--sobre-cor); font-size: .72rem; }


.enunciado-atual-painel { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--destaque-suave); }
.enunciado-atual-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: center; line-height: 1.25; }
.enunciado-atual-texto small { color: var(--tinta-fraca); font-size: .76rem; }
.enunciado-atual-texto strong { font-weight: 650; font-size: .95rem; }
.enunciado-dica { display: block; font-size: .85rem; color: var(--tinta); font-style: italic; }

/* Tabuleiro */
.tabuleiro-area { position: relative; flex: 1; min-height: 0; display: flex; }
.tabuleiro-rolagem { flex: 1; min-width: 0; overflow: auto; display: flex; padding: 8px; }
.tabuleiro {
    --tam: min(calc((100vw - 18px) / var(--colunas)), calc((100dvh - 482px + var(--folga-topo, 0px)) / var(--linhas)), 44px);
    --casa-tam: calc(max(var(--tam), 19px) * var(--zoom));
    display: grid;
    grid-template-columns: repeat(var(--colunas), var(--casa-tam));
    grid-auto-rows: var(--casa-tam);
    margin: auto;
}
.casa, .casa-vazia { width: var(--casa-tam); height: var(--casa-tam); }
.casa {
    position: relative; display: block; padding: 0; margin: 0;
    border: 1px solid var(--casa-borda); border-radius: 0;
    background: var(--casa); color: #16202a;
}
.casa { margin-right: -1px; margin-bottom: -1px; width: calc(var(--casa-tam) + 1px); height: calc(var(--casa-tam) + 1px); }
.casa-letra { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: calc(var(--casa-tam) * .56); line-height: 1; padding-top: 6%; }
.casa-numero { position: absolute; top: 1px; left: 2px; z-index: 1; font-size: max(8px, calc(var(--casa-tam) * .24)); line-height: 1; color: #46515d; font-weight: 600; }
.casa-na-palavra { background: #fdeec8; }
.casa-cursor { background: #fbcf6b; box-shadow: inset 0 0 0 2px var(--cursor); z-index: 2; }
.casa-publica { background: color-mix(in srgb, var(--cor, #0f766e) 24%, white); }
.casa-publica .casa-letra { color: #16202a; }
.casa-revelada .casa-letra { color: #6d28d9; }
.casa-destaque { animation: destaque 1.4s ease-out; z-index: 3; }
.casa-tremor { animation: tremor .4s; background: #f9c9c3; }
@keyframes destaque { 0% { transform: scale(1); background: var(--cor, #f59e0b); } 25% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes tremor { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }

.zoom { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; }
.zoom .botao-icone { background: var(--superficie); box-shadow: var(--sombra); }

.flutuante { position: absolute; top: 12px; left: 50%; z-index: 5; padding: 6px 14px; border-radius: 999px; background: var(--cor); color: var(--sobre-cor); font-weight: 700; white-space: nowrap; box-shadow: var(--sombra); animation: flutuar 1.6s ease-out forwards; pointer-events: none; }

@keyframes flutuar { 0% { transform: translate(-50%, 12px) scale(.9); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -18px); opacity: 0; } }

.acoes-jogo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 10px; background: var(--superficie); border-top: 1px solid var(--linha); }
.botao-confirmar { min-height: 44px; padding: 6px 14px; font-size: 1.05rem; }
/* Palavra cheia: só falta confirmar, e é esse o passo que as pessoas esqueciam. */
.botao-confirmar-pronto:not(:disabled) { box-shadow: 0 0 0 3px var(--destaque); animation: chamar-confirmar 1.1s ease-in-out infinite; }
@keyframes chamar-confirmar { 50% { transform: scale(1.05); box-shadow: 0 0 0 7px var(--destaque); filter: brightness(1.2); } }
@keyframes piscar-confirmar { 50% { box-shadow: 0 0 0 3px transparent; filter: brightness(1.35); } }
.dicas { position: relative; flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 6px; min-width: 0; }
.dica-bloqueada { font-size: .8rem; color: var(--tinta-fraca); white-space: nowrap; }
.dicas-fundo { position: fixed; inset: 0; z-index: 29; padding: 0; border: 0; background: rgb(10 15 20 / .25); cursor: default; }
.dicas-popup { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30; display: grid; gap: 8px; width: min(260px, calc(100vw - 32px)); padding: 10px 12px 12px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.dicas-popup-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: .86rem; color: var(--tinta-fraca); }
.dicas-popup-topo .botao-icone { flex: none; border: 0; background: transparent; color: var(--tinta); }
.dica { min-height: 32px; padding: 3px 9px; border: 1px solid var(--destaque); border-radius: 8px; background: var(--destaque-suave); font-size: .8rem; font-weight: 600; }
.dica:disabled { opacity: .45; }
.aviso-jogo { margin: 0; padding: 5px 12px; font-size: .86rem; text-align: center; background: var(--superficie-2); }

.teclado { display: grid; grid-template-columns: repeat(var(--teclas-por-linha), 1fr); gap: 8px; padding: 5px 6px 6px; background: var(--superficie-2); }
.tecla { min-height: 44px; padding: 0; border: 0; border-radius: 6px; background: var(--superficie); box-shadow: 0 1px 0 var(--linha); font-size: 1.15rem; font-weight: 650; }
.tecla:active { background: var(--destaque-suave); }

/* Enunciados */
.enunciados h3 { margin: 12px 0 4px; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-fraca); }
.enunciados h3:first-child { margin-top: 0; }
.enunciados ol { list-style: none; margin: 0; padding: 0; }
.enunciado { display: flex; gap: 8px; width: 100%; padding: 7px 8px; text-align: left; background: none; border: 0; border-left: 3px solid transparent; border-radius: 6px; font-size: .92rem; line-height: 1.3; }
.enunciado:hover:not(:disabled) { background: var(--superficie-2); }
.enunciado-numero { min-width: 1.4em; font-weight: 700; font-variant-numeric: tabular-nums; }
.enunciado-texto { min-width: 0; }
.enunciado-texto small { display: block; margin-top: 1px; color: var(--tinta-fraca); font-size: .78rem; }
.enunciado-atual { background: var(--destaque-suave); border-left-color: var(--destaque); }
.enunciado-feito { border-left-color: var(--cor, var(--marca)); color: var(--tinta-fraca); }
.enunciado-feito strong { color: var(--tinta); }

/* Placar */
.placar { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.placar-linha { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; }
.placar-eu { background: var(--superficie-2); }
.placar-posicao { width: 1.1em; text-align: center; font-weight: 700; color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }
.avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--cor); color: var(--sobre-cor); font-weight: 700; object-fit: cover; }

.placar-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; font-weight: 600; overflow-wrap: anywhere; }
.placar-nome small { font-weight: 400; color: var(--tinta-fraca); font-size: .76rem; }
.placar-video { flex: none; min-width: 44px; min-height: 44px; border: 0; background: transparent; text-decoration: none; }
.placar-pontos { font-size: 1.2rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.status { display: inline-block; width: 7px; height: 7px; margin-right: 2px; border-radius: 50%; background: var(--linha); }
.status-on { background: #22a55b; }

/* Chat */
.chat { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--chat-fundo); border: 1px solid var(--linha); border-radius: var(--raio); }
.chat-topo { display: flex; flex-direction: column; padding: 8px 12px; background: var(--superficie); border-bottom: 1px solid var(--linha); line-height: 1.2; }
.chat-estado { color: var(--tinta-fraca); font-size: .78rem; min-height: 1.1em; }
.digitando { color: var(--marca-forte); font-style: italic; }
.chat-lista { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 10px 4px; display: flex; flex-direction: column; gap: 5px; overscroll-behavior: contain; }
.chat-vazio { margin: auto; color: var(--tinta-fraca); }
.chat-sistema { text-align: center; }
.chat-sistema span { display: inline-block; padding: 3px 10px; border-radius: 8px; background: var(--superficie-2); font-size: .78rem; color: var(--tinta-fraca); }
.chat-item { position: relative; display: flex; flex-direction: column; align-items: flex-start; max-width: 88%; }
.chat-minha { align-self: flex-end; align-items: flex-end; }
.balao { display: flex; flex-direction: column; padding: 5px 9px; max-width: 100%; text-align: left; background: var(--balao); border: 0; border-radius: 3px 10px 10px 10px; box-shadow: 0 1px 1px rgb(0 0 0 / .1); font-size: .93rem; line-height: 1.3; }
.chat-minha .balao { background: var(--balao-meu); border-radius: 10px 3px 10px 10px; }
.balao-autor { font-size: .78rem; font-weight: 700; color: var(--cor); overflow-wrap: anywhere; }
.balao-citacao { margin: 2px 0 4px; padding: 3px 7px; border-left: 3px solid var(--marca); border-radius: 4px; background: rgb(0 0 0 / .05); font-size: .8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.balao-citacao strong { display: block; font-size: .74rem; }
.balao-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.balao-rodape { align-self: flex-end; margin-top: 1px; color: var(--tinta-fraca); font-size: .68rem; font-variant-numeric: tabular-nums; }
.tique { margin-left: 2px; }
.tique-lido { color: var(--tique); font-weight: 700; }
.reacoes { display: flex; flex-wrap: wrap; gap: 3px; margin-top: -3px; z-index: 1; }
.reacao { padding: 0 6px; border: 1px solid var(--linha); border-radius: 999px; background: var(--superficie); font-size: .76rem; }
.reacao-minha { border-color: var(--marca); }
.menu-mensagem { display: flex; flex-direction: column; min-width: 190px; margin-top: 3px; padding: 4px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; box-shadow: var(--sombra); z-index: 4; }
.menu-mensagem > button { padding: 7px 10px; text-align: left; background: none; border: 0; border-radius: 6px; font-size: .88rem; }
.menu-mensagem > button:hover { background: var(--superficie-2); }
.menu-reacoes { display: flex; justify-content: space-between; padding-bottom: 3px; border-bottom: 1px solid var(--linha); margin-bottom: 3px; }
.menu-reacoes button { min-width: 30px; min-height: 32px; padding: 0; background: none; border: 0; font-size: 1.05rem; }
.chat-silenciados { display: flex; flex-wrap: wrap; gap: 8px; padding: 3px 12px; background: var(--superficie); font-size: .78rem; color: var(--tinta-fraca); }
.chat-silenciados .link-discreto { font-size: .78rem; }
.chat-aviso { margin: 0; padding: 6px 12px; background: var(--destaque-suave); font-size: .85rem; }
.chat-respondendo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 12px; background: var(--superficie); border-top: 1px solid var(--linha); border-left: 3px solid var(--marca); font-size: .82rem; }
.chat-respondendo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-respondendo button { background: none; border: 0; }
.chat-emojis { display: grid; grid-template-columns: repeat(8, 1fr); padding: 4px; background: var(--superficie); border-top: 1px solid var(--linha); }
.chat-emojis button { min-height: 36px; padding: 0; background: none; border: 0; font-size: 1.15rem; }
.chat-entrada { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--superficie); border-top: 1px solid var(--linha); }
.chat-entrada .campo { min-height: 40px; border-radius: 20px; padding: 6px 14px; }
.chat-botao-emoji { flex: none; width: 36px; height: 40px; padding: 0; background: none; border: 0; font-size: 1.25rem; }
.chat-enviar { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--marca); color: var(--marca-texto); font-size: 1rem; }
.chat-enviar-vazio { opacity: .45; }

/* Resultado */
.resultado-fundo { position: absolute; inset: 0; z-index: 20; display: flex; padding: 16px; overflow: auto; background: rgb(10 15 20 / .55); }
.resultado { width: min(440px, 100%); margin: auto; }

/* Computador: enunciados | tabuleiro | placar + chat */
@media (min-width: 1000px) {
    .sala-espera { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 16px; padding: 16px; width: min(1040px, 100%); margin: 0 auto; }
    .espera-painel { border-width: 1px; border-radius: var(--raio); box-shadow: var(--sombra); }
    .sala-espera .chat, .sala-espera.aba-chat .chat { display: flex; min-height: 0; border-width: 1px; border-radius: var(--raio); }
    .sala-espera.aba-chat .espera-painel { display: block; }
    .abas-espera { display: none; }
    .jogo {
        display: grid;
        grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(290px, 360px);
        grid-template-rows: auto minmax(0, auto) minmax(0, 1fr);
    }
    .jogo-barra { grid-column: 1 / -1; }
    .jogo-enunciados { display: block; grid-column: 1; grid-row: 2 / 4; border-right: 1px solid var(--linha); }
    .jogo-tabuleiro { display: flex; grid-column: 2; grid-row: 2 / 4; }
    .jogo-placar { display: block; grid-column: 3; grid-row: 2; max-height: 34dvh; border-left: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
    .jogo-chat { display: flex; grid-column: 3; grid-row: 3; border-left: 1px solid var(--linha); }
    .abas-jogo, .teclado { display: none; }
    .tabuleiro { --tam: min(calc((100vw - 690px) / var(--colunas)), calc((100dvh - 240px + var(--folga-topo, 0px)) / var(--linhas)), 46px); }
    .enunciado-atual-texto strong { font-size: 1.05rem; }
    .acoes-jogo { padding: 8px 14px; }

    .jogo-solo { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
    .jogo-solo .trilha { grid-column: 1 / -1; }
    .jogo-solo .jogo-enunciados { grid-row: 3; }
    .jogo-solo .jogo-tabuleiro { grid-row: 3; }
    .jogo-solo .tabuleiro { --tam: min(calc((100vw - 370px) / var(--colunas)), calc((100dvh - 268px + var(--folga-topo, 0px)) / var(--linhas)), 46px); }
}

@media (prefers-reduced-motion: reduce) {
    .casa-destaque, .casa-tremor, .flutuante { animation-duration: .01ms; }
    /* Sem movimento, mas o botão continua piscando: chamar a atenção para ele é o que faz a pessoa concluir a palavra. */
    .botao-confirmar-pronto:not(:disabled) { animation-name: piscar-confirmar; }
}

/* Mensagem de erro do Blazor */
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; z-index: 1000; width: 100%; padding: 10px 16px; background: var(--erro-fundo); color: var(--erro); }
#blazor-error-ui .dismiss { position: absolute; right: 12px; top: 8px; cursor: pointer; }

/* Áreas de toque: pelo menos 44 px em telas de toque e no celular */
@media (max-width: 999px), (pointer: coarse) {
    .jogo-barra .link-discreto, .acoes-linha .link-discreto, .link-formulario .link-discreto, .sobretitulo .link-discreto,.topo > .link-discreto, .perfil-foto-acoes .link-discreto { display: inline-flex; align-items: center; min-height: 44px; }
    .jogo-barra .botao-icone, .zoom .botao-icone, .enunciado-atual-painel .botao-icone { min-width: 44px; min-height: 44px; }
    .sugestao { min-height: 44px; white-space: nowrap; }
    .sugestoes { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .dica { min-height: 44px; }
}
@media (max-width: 480px) {
    .progresso-barra { display: none; }
    .jogo-solo .jogo-titulo, .jogo-topo-junto .jogo-titulo { display: none; }
    .jogo-topo-junto .progresso { margin-left: auto; }
    /* Com mensagem não lida, o aviso ocupa a vaga do som até a pessoa separar o topo ou ler. */
    body:has(.topo-conversas) .jogo-topo-junto .botao-som { display: none; }
    .jogo-solo .progresso { margin-left: auto; }
}

/* Formato Coquetel: enunciados dentro do tabuleiro. As casas ficam claras nos dois temas, como no formato atual. */
.cq-dica { display: grid; min-width: 0; min-height: 0; background: #e6e2d8; }
.cq-dupla { grid-template-rows: 1fr 1fr; }
.cq-dupla .cq-texto + .cq-texto { border-top: 1px solid #16202a; }
.tabuleiro-coquetel { --casa-tam: calc(72px * var(--zoom)); }
@media (max-width: 999px) { .tabuleiro-coquetel { --casa-tam: calc(60px * var(--zoom)); } }
.tabuleiro-coquetel .casa-vazia { background: color-mix(in srgb, var(--casa-borda) 15%, var(--superficie-2)); }
.tabuleiro-coquetel .cq-dica { width: calc(var(--casa-tam) + 1px); height: calc(var(--casa-tam) + 1px); margin-right: -1px; margin-bottom: -1px; border: 1px solid var(--casa-borda); }
.cq-feita { opacity: .45; }
.zoom .botao-formato[aria-pressed="true"] { background: var(--marca); color: var(--marca-texto); }
.cq-texto { position: relative; min-width: 0; min-height: 0; overflow: hidden; padding: 1px 2px; border: 0; border-radius: 0; background: transparent; color: #16202a; font-family: inherit; font-weight: 600; line-height: 1.08; text-align: center; overflow-wrap: anywhere; hyphens: auto; cursor: pointer; }
.cq-direita { padding-right: calc(var(--casa-tam) * .1); }
.cq-baixo { padding-bottom: calc(var(--casa-tam) * .1); }
.cq-direita::after, .cq-baixo::after { position: absolute; color: #0f766e; font-size: calc(var(--casa-tam) * .1); line-height: 1; }
.cq-direita::after { content: "▶"; right: 0; top: calc(50% - var(--casa-tam) * .05); }
.cq-baixo::after { content: "▼"; bottom: 0; left: calc(50% - var(--casa-tam) * .05); }
.cq-ativa { background: #fbcf6b; }