/* Ajustes exclusivos para telas pequenas; o arquivo e carregado com media max-width no HTML. */
@media (max-width: 768px) {
    /* Evita que o navegador crie rolagem lateral fora do controle da grade. */
    html,
    body {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
        font-size: 12px; /* Reduz de forma perceptivel toda tipografia baseada em rem somente no celular. */
        -webkit-text-size-adjust: 100%; /* Impede o Chrome e o Safari de ampliarem automaticamente as letras reduzidas. */
        text-size-adjust: 100%; /* Mantem o tamanho mobile definido no CSS nos navegadores compativeis. */
        touch-action: pan-x pan-y pinch-zoom; /* Libera explicitamente o gesto de pinça para ampliar ou reduzir a pagina. */
    }

    /* Desliga a escala global do desktop, que deixaria a interface pequena demais no celular. */
    .page-scale-frame {
        width: 100%;
        height: auto !important;
        transform: none !important;
        touch-action: pan-x pan-y pinch-zoom; /* Preserva o zoom manual dentro do contenedor principal do V. */
    }

    /* Faz a pagina ocupar a largura real do aparelho sem depender do tamanho de desktop. */
    .page {
        width: 100%;
        min-width: 0;
        padding: 2px; /* Reduz a margem geral para caber mais jogo na tela do celular. */
        touch-action: pan-x pan-y pinch-zoom; /* Mantem a pinça disponível sobre toda a pagina do jogo. */
    }

    /* Empilha titulo, login e status para impedir sobreposicao em telas estreitas. */
    .toolbar-hero,
    .compact-hero {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px; /* Compacta o topo para aproximar status, jogada e grade. */
        margin-bottom: 2px; /* Reduz o espaco vertical antes da area de jogo. */
        padding: 2px; /* Remove o excesso de moldura do cabecalho mobile. */
    }

    /* Coloca marca, login e status na mesma coluna real para impedir a sobreposicao vista no celular. */
    .toolbar-hero .hero-title,
    .toolbar-hero .top-status-messages {
        grid-column: 1; /* Anula as colunas fixas herdadas do layout de computador. */
        width: 100%; /* Faz cada linha respeitar a largura exata da tela. */
        min-width: 0; /* Permite que textos longos sejam reduzidos ou recortados dentro da tela. */
    }

    /* Centraliza a marca e os dados de acesso sem posicionamento absoluto. */
    .toolbar-hero .hero-title {
        display: grid; /* Separa a marca da linha de login no fluxo mobile. */
        justify-items: center; /* Centraliza os dois grupos na largura do celular. */
        gap: 2px; /* Mantem as duas linhas próximas. */
        padding: 0; /* Retira o recuo lateral herdado do computador. */
    }

    /* Reduz a marca no topo sem retirar a identificacao do jogo. */
    .hero-title h1 {
        margin: 0;
        font-size: 1rem; /* Torna a marca visivelmente menor no celular. */
        line-height: 1.1;
        text-align: center;
    }

    /* Reduz especificamente os elementos da marca que possuem tamanho proprio no CSS de computador. */
    .brand-vocabulus {
        font-size: 1rem; /* Impede que o clamp do computador volte a aumentar VOCABULUS. */
    }

    .brand-by {
        font-size: 0.66rem; /* Mantem o credito proporcional à marca compactada. */
    }

    /* Permite que versao, usuario e botao sair quebrem linha sem estourar a tela. */
    .build-login-line,
    .login-status-bar {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3px; /* Reduz o intervalo entre os indicadores do topo. */
    }

    /* Retira o posicionamento absoluto que fazia login e versão cobrirem o status. */
    .build-login-line {
        position: static; /* Coloca a linha no fluxo normal do cabeçalho mobile. */
        width: 100%; /* Usa somente a largura disponível do aparelho. */
        max-width: 100%; /* Anula o limite proporcional criado para o computador. */
    }

    /* Compacta os indicadores de usuário, presença e sala. */
    .login-status-name,
    .login-status-online,
    .multiplayer-room-badge {
        padding: 2px 4px; /* Reduz a altura e a largura ocupadas pelos indicadores. */
        font-size: 0.68rem; /* Diminui de forma perceptível as letras do topo. */
    }

    /* Compacta os comandos de sessão sem alterar seu funcionamento. */
    .multiplayer-text-button {
        min-height: 24px; /* Reduz a altura do botão MULTIPLAYER no celular. */
        padding: 3px 7px; /* Diminui a largura ocupada pelo comando. */
        font-size: 0.68rem; /* Reduz o rótulo do botão. */
    }

    .logout-button {
        min-height: 24px; /* Alinha o botão Sair aos demais indicadores compactos. */
        padding: 2px 6px; /* Retira o excesso de espaço interno. */
        font-size: 0.66rem; /* Reduz o texto do botão Sair. */
    }

    .build-marker {
        padding: 1px 5px; /* Compacta a cápsula da versão. */
        font-size: 0.66rem; /* Reduz o marcador V.388 no cabeçalho mobile. */
    }

    /* Mantem os textos de login legiveis e curtos dentro da largura do telefone. */
    .login-status-name,
    .login-status-online,
    .build-marker {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Deixa o status principal ocupar a largura inteira antes da area de jogo. */
    .top-status-messages {
        width: 100%;
        margin: 0;
    }

    /* Reduz a faixa de mensagens e impede que ela invada os indicadores do topo. */
    .toolbar-hero .top-status-messages .message {
        padding: 3px 6px; /* Diminui a altura da mensagem de status. */
        font-size: 0.72rem; /* Reduz jogador e mensagem de sistema no celular. */
    }

    /* Permite abrir historico de status sem cortar frases longas. */
    .status-dropdown-menu {
        max-width: calc(100vw - 16px);
        overflow-wrap: anywhere;
    }

    /* Troca as tres colunas do desktop por uma pilha vertical controlada. */
    .workspace {
        display: flex !important;
        flex-direction: column;
        gap: 3px; /* Diminui a distancia vertical entre os blocos empilhados. */
        min-width: 0;
    }

    /* Coloca a grade logo apos o status, que e o fluxo mais natural no celular. */
    .board-center {
        order: 1;
        min-height: 0;
        width: 100%;
    }

    /* Coloca jogada, jogadores e botoes do Vocabulus logo depois da grade. */
    .dock-zone[data-dock="right"] {
        order: 2;
    }

    /* Coloca controles, grade e dicionario depois da area de jogada. */
    .dock-zone[data-dock="left"] {
        order: 3;
    }

    /* Remove aparencia de coluna fixa e deixa os paineis usarem toda a largura. */
    .dock-column {
        width: 100%;
        min-height: 0;
        padding: 0;
        background: transparent;
    }

    /* Prioriza a área usada em cada jogada antes das configurações de jogadores. */
    .dock-zone[data-dock="right"] .dock-panel[data-panel-id="jogada"] {
        order: 1; /* Mostra JOGADA imediatamente depois da grade no celular. */
    }

    .dock-zone[data-dock="right"] .dock-panel[data-panel-id="placar"] {
        order: 2; /* Coloca o PLACAR entre JOGADA e JOGADORES depois que o jogo iniciar. */
    }

    .dock-zone[data-dock="right"] .dock-panel[data-panel-id="jogadores"] {
        order: 3; /* Move JOGADORES para depois do placar durante a partida. */
    }

    .dock-zone[data-dock="right"] .dock-panel[data-panel-id="vocabulus"] {
        order: 4; /* Mantem os comandos automáticos depois dos controles humanos. */
    }

    /* Impede que larguras minimas de desktop criem rolagem lateral geral. */
    .dock-panel,
    .dock-panel[data-panel-id="jogada"],
    .compact-vocabulus-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        resize: none;
    }

    /* Compacta a area de toque dos cabecalhos e botoes de recolher. */
    .panel-handle {
        min-height: 26px; /* Reduz de modo visível a altura dos cabecalhos no celular. */
        padding: 2px 5px; /* Diminui o espaco interno sem retirar a identificação. */
    }

    /* Deixa o titulo dos paineis proporcional ao novo cabecalho compacto. */
    .panel-title {
        font-size: 0.72rem; /* Reduz efetivamente as letras dos titulos dos paineis. */
    }

    /* Mantem cada painel com respiro suficiente para toque sem ficar alto demais. */
    .panel-body {
        gap: 3px; /* Compacta o conteudo interno dos paineis mobile. */
        padding-top: 2px; /* Aproxima o primeiro campo do cabecalho do painel. */
    }

    /* Faz a grade ocupar a largura do celular e rolar por dentro quando for maior. */
    .board-section {
        width: 100%;
        height: auto;
        max-height: none;
        margin: 0;
        padding: 4px; /* Reduz a moldura da grade para ganhar area util. */
        overflow: hidden;
    }

    /* Cria a area de rolagem horizontal e vertical somente para o tabuleiro. */
    .board-wrapper {
        width: 100%;
        max-height: 52vh; /* Impede que a grade esconda toda a área JOGADA na primeira tela. */
        margin-top: 0;
        padding: 2px 4px 6px; /* Compacta a area rolavel da grade sem encostar nas bordas. */
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y pinch-zoom; /* Permite iniciar o gesto de zoom também sobre a grade. */
    }

    /* Reduz as celulas para exibir uma area maior da grade na tela estreita. */
    .board,
    .board-top-header {
        --board-cell-size: 24px; /* Reduz claramente células e cabeçalhos da grade no celular. */
        margin-left: 0;
        margin-right: 0;
    }

    /* Mantem os numeros de linha e coluna legiveis no celular. */
    .board-header-cell {
        font-size: 0.68rem; /* Diminui os numeros de linha e coluna junto com a grade. */
    }

    /* Ajusta o alvo de toque e as letras ao novo tamanho da grade. */
    .cell-button {
        min-height: 24px; /* Mantem o botao alinhado ao tamanho reduzido da celula. */
        font-size: 0.76rem; /* Reduz de forma perceptível as letras inseridas na grade. */
        touch-action: pan-x pan-y pinch-zoom; /* Substitui a regra que podia limitar o gesto iniciado sobre uma célula. */
    }

    /* Compacta os controles gerais para reduzir a altura total da pagina. */
    input,
    select,
    button {
        min-height: 30px; /* Diminui efetivamente a altura dos controles mobile. */
        font-size: 0.76rem; /* Reduz de forma perceptível as letras dos botoes. */
    }

    /* Evita zoom automatico do iOS ao focar campos menores que 16px. */
    input,
    select {
        font-size: 14px; /* Reduz os valores digitados sem comprometer a leitura no aparelho testado. */
    }

    /* Deixa a palavra da jogada como o campo mais evidente da tela. */
    .input-word-main {
        min-height: 34px; /* Mantem o campo principal destacado com menor altura. */
        font-size: 14px; /* Torna a palavra digitada menor de forma visível. */
    }

    /* Faz o botao escrever ficar facil de acionar com o polegar. */
    .write-button {
        min-height: 32px; /* Reduz o botao principal sem dificultar o toque. */
        font-size: 0.74rem; /* Compacta de forma perceptível o rotulo ESCREVER. */
    }

    /* Prepara os pares internos de direção e posição para a mesma faixa horizontal. */
    .jogada-posicao-row,
    .jogada-config-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3px; /* Reduz o espaco entre os controles que ficarão lado a lado. */
    }

    /* Divide o formulário Jogada em quatro faixas apenas no celular. */
    .dock-panel[data-panel-id="jogada"] .sidebar-form {
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* Permite alinhar quatro controles na mesma linha. */
        column-gap: 4px; /* Mantem separacao mínima entre direção, posição, letras e tempos. */
        row-gap: 3px; /* Reduz o espaço vertical entre as linhas do formulário. */
    }

    /* Mantem palavra e escrita em linhas inteiras acima dos controles compactos. */
    .dock-panel[data-panel-id="jogada"] .sidebar-form > .current-player-word-label {
        grid-column: 1 / -1; /* Preserva toda a largura para a palavra digitada. */
        grid-row: 1; /* Mantem o campo como primeiro item do formulário. */
    }

    .dock-panel[data-panel-id="jogada"] .sidebar-form > .write-button {
        grid-column: 1 / -1; /* Preserva toda a largura para o comando principal. */
        grid-row: 2; /* Mantem ESCREVER logo abaixo da palavra. */
    }

    /* Coloca Horizontal e Vertical na metade esquerda da mesma linha de Linha e Coluna. */
    .dock-panel[data-panel-id="jogada"] .sidebar-form > .jogada-direction-row {
        grid-column: 1 / 3; /* Reserva duas das quatro faixas para os botões de direção. */
        grid-row: 3; /* Alinha direção e posição na terceira linha do formulário. */
        width: 100%; /* Usa toda a metade esquerda disponível. */
        margin-bottom: 0; /* Retira o espaço vertical herdado do computador. */
    }

    .dock-panel[data-panel-id="jogada"] .jogada-direction-field {
        width: 100%; /* Faz o grupo de direção respeitar a metade reservada. */
    }

    .dock-panel[data-panel-id="jogada"] .direction-choice-group {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Divide a metade esquerda entre Horizontal e Vertical. */
        gap: 3px; /* Aproxima os dois comandos para liberar espaço lateral. */
        width: 100%; /* Anula a largura fixa usada no computador. */
    }

    .dock-panel[data-panel-id="jogada"] .direction-choice {
        min-height: 28px; /* Reduz a altura dos botões de direção somente no celular. */
        padding: 2px 3px; /* Diminui a largura interna para os rótulos caberem. */
        font-size: 0.62rem; /* Mantem Horizontal e Vertical legíveis na faixa compacta. */
    }

    /* Coloca Linha e Coluna na metade direita da mesma linha dos botões de direção. */
    .dock-panel[data-panel-id="jogada"] .sidebar-form > .jogada-posicao-row {
        grid-column: 3 / 5; /* Reserva as duas faixas restantes para Linha e Coluna. */
        grid-row: 3; /* Mantem os quatro controles na mesma linha horizontal. */
        width: 100%; /* Usa toda a metade direita disponível. */
        justify-content: stretch; /* Distribui os dois campos sem largura fixa. */
    }

    .dock-panel[data-panel-id="jogada"] .jogada-posicao-row > label {
        gap: 2px; /* Aproxima o título do respectivo campo. */
        font-size: 0.62rem; /* Reduz os rótulos Linha e Coluna no celular. */
    }

    .dock-panel[data-panel-id="jogada"] .jogada-posicao-row .input-xs {
        min-height: 28px; /* Reduz os campos grandes vistos no teste móvel. */
        height: 28px; /* Garante alinhamento com Horizontal e Vertical. */
        padding: 1px 3px; /* Retira o excesso de espaço interno dos campos numéricos. */
        font-size: 12px; /* Mantem o número legível no espaço reduzido. */
    }

    /* Usa a grade do formulário para posicionar quantidade e tempos lado a lado. */
    .dock-panel[data-panel-id="jogada"] .jogada-tamanho-row,
    .dock-panel[data-panel-id="jogada"] .jogada-config-row {
        display: contents; /* Remove apenas a caixa visual intermediária no layout mobile. */
    }

    /* Coloca Qtd. Letras na metade esquerda da quarta linha. */
    .dock-panel[data-panel-id="jogada"] .jogada-tamanho-row > label:first-child {
        grid-column: 1 / 3; /* Reserva metade da linha para o seletor com textos maiores. */
        grid-row: 4; /* Alinha o seletor com os dois campos de tempo. */
    }

    /* Coloca Tempo p/Jogada na terceira faixa da quarta linha. */
    .dock-panel[data-panel-id="jogada"] .jogada-config-row > label:first-child {
        grid-column: 3; /* Usa uma faixa para o tempo da jogada. */
        grid-row: 4; /* Mantem o campo na mesma linha de Qtd. Letras. */
    }

    /* Coloca Tempo p/Jogador na quarta faixa da mesma linha. */
    .dock-panel[data-panel-id="jogada"] .jogada-config-row > label:last-child {
        grid-column: 4; /* Usa a última faixa para o tempo total do jogador. */
        grid-row: 4; /* Alinha os três controles solicitados horizontalmente. */
        width: 100%; /* Faz o campo respeitar somente a faixa disponível. */
        justify-self: stretch; /* Evita centralização que criaria uma linha adicional. */
    }

    /* Move os valores auxiliares de Exatamente, Entre, Maior ou Menor para uma linha própria. */
    .dock-panel[data-panel-id="jogada"] .regra-tamanho-campo {
        grid-row: 5; /* Mantem os campos condicionais abaixo da linha principal. */
    }

    /* Mantem o cronômetro abaixo de todas as configurações compactadas. */
    .dock-panel[data-panel-id="jogada"] .sidebar-form > .jogada-turn-timer-panel {
        grid-column: 1 / -1; /* Preserva a barra de tempo em toda a largura. */
        grid-row: 6; /* Evita que campos condicionais ocupem a área do cronômetro. */
    }

    /* Permite que a regra de letras quebre em grade compacta e pesquisavel visualmente. */
    .jogada-tamanho-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px; /* Reduz o espaco entre os campos da regra de letras. */
    }

    /* Remove larguras fixas herdadas do desktop em campos curtos. */
    .input-xs,
    .input-md,
    .input-word {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /* Transforma os controles em uma grade de dois botoes por linha. */
    .side-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px; /* Reduz o intervalo entre botoes de controle. */
    }

    /* Faz o botao reiniciar acompanhar a largura total dos demais controles. */
    .dock-panel[data-panel-id="controles"] .stack-form {
        margin-top: 6px; /* Aproxima o botao reiniciar dos demais controles. */
    }

    /* Compacta os botoes secundarios para ocupar menos altura na tela. */
    .dock-panel[data-panel-id="controles"] .control-button,
    .dock-panel[data-panel-id="dicionario"] .sidebar-form .button,
    .dock-panel[data-panel-id="jogadores"] .players-popup-button {
        min-height: 30px; /* Reduz de forma visível os botoes secundarios. */
        font-size: 0.68rem; /* Diminui os rotulos longos para caberem melhor em duas colunas. */
    }

    /* Reorganiza a selecao do dicionario sem comprimir o texto. */
    .dictionary-inline-controls {
        grid-template-columns: 1fr;
    }

    /* Deixa os controles de jogadores lado a lado quando couber e empilhados quando necessario. */
    .players-inline-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px; /* Compacta os controles do painel de jogadores. */
    }

    /* Mantem os botoes do painel Vocabulus em duas colunas estaveis. */
    .compact-vocabulus-buttons {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px; /* Compacta os dois botoes do painel Vocabulus. */
    }

    /* Reposiciona a ampulheta de processamento para nao sair da tela. */
    .valid-cells-processing-indicator {
        left: auto;
        right: 8px;
        top: 8px;
        transform: none;
    }

    /* O placar deixa de ser fixo para nao cobrir campos quando o teclado abre. */
    .bottom-dock {
        position: static;
        width: 100%;
        max-height: none;
        min-height: 0;
        margin-top: 6px; /* Aproxima o placar do restante do fluxo mobile. */
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    /* O placar passa a ocupar a largura inteira e rolar internamente se houver muitas jogadas. */
    .board-score-panel {
        width: 100%;
        min-width: 0;
        max-height: none;
        padding: 4px; /* Reduz a moldura do placar no celular. */
    }

    /* Mostra o cabecalho do placar no celular para o usuario entender a secao. */
    .board-score-panel .panel-handle {
        display: flex;
    }

    /* Remove limite vertical de desktop do corpo do placar. */
    .board-score-panel .panel-body {
        max-height: none;
        overflow: visible;
    }

    /* Troca o placar horizontal por lista vertical de jogadores. */
    .score-list {
        grid-template-columns: 1fr;
        gap: 6px; /* Diminui a distancia entre jogadores no placar. */
    }

    /* Aumenta o respiro de cada jogador no placar mobile. */
    .score-card {
        min-height: 0;
        padding: 3px; /* Compacta cada cartao do placar. */
    }

    /* Evita que nomes e indicadores do placar se sobreponham. */
    .score-heading-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px; /* Evita sobra horizontal no cabecalho do placar. */
    }

    /* Faz detalhes de palavras quebrarem linha em vez de estourar a largura. */
    .score-word-detail summary,
    .score-word-breakdown {
        overflow-wrap: anywhere;
    }

    /* Ajusta o modal de fim de jogo para caber na tela do celular. */
    .game-over-card-overlay {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        overflow: auto;
    }

    /* Compacta as metricas finais para uma coluna no celular. */
    .game-over-player-metrics {
        flex-direction: column;
        align-items: stretch;
    }

    /* Mantem a tela de login dentro da viewport em celulares estreitos. */
    .auth-stage {
        width: min(100vw - 10px, calc((100vh - 10px) * 0.65));
    }

    /* Reduz um pouco a distancia lateral do formulario de login em celular. */
    .auth-panel {
        left: 17%;
        right: 17%;
    }
}

/* Ajustes extras para telefones muito estreitos. */
@media (max-width: 430px) {
    /* Mantem Linha e Coluna lado a lado também nos telefones estreitos. */
    .jogada-posicao-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Evita voltar ao empilhamento vertical mostrado no teste. */
    }

    /* A grade ganha mais altura util em celulares menores. */
    .board-wrapper {
        max-height: 58vh;
    }

    /* O titulo fica mais compacto sem desaparecer. */
    .hero-title h1 {
        font-size: 0.92rem; /* Reduz ainda mais a marca nos telefones estreitos. */
    }
}