/* ============================================================
   Páginas de jogo no celular: o jogo e os controles precisam caber
   juntos na tela, sem rolar. Vale só para <body class="pagina-jogo">
   em telas de até 640 px de largura.
   ============================================================ */
@media (max-width: 640px) {
  .pagina-jogo {
    /* altura da barra de controles fixa (0 nas páginas sem ela) */
    --barra: 0px;
  }
  .pagina-jogo:has(#controles) {
    --barra: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* Cabeçalho em uma linha só: logo + botões; sem o nome ao lado do logo e
     sem o nome do usuário (fica só a letra). */
  .pagina-jogo .site-header {
    padding: 4px 12px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .pagina-jogo .brand .wordmark { display: none; }
  .pagina-jogo .brand .logo-mark { height: 30px; }
  .pagina-jogo .auth-widget { gap: 6px; flex-wrap: nowrap; }
  .pagina-jogo .auth-user { font-size: 0; gap: 0; }
  .pagina-jogo .auth-avatar { width: 28px; height: 28px; font-size: 0.6rem; }

  /* Título pequeno e sem a explicação (os controles na tela já bastam). */
  .pagina-jogo main { padding: 0 10px calc(var(--barra) + 20px); }
  .pagina-jogo .hero { padding: 8px 0 4px; }
  .pagina-jogo .hero h1 { font-size: 0.9rem; margin: 0; text-shadow: 0 0 8px rgba(255, 77, 141, 0.6); }
  .pagina-jogo .hero p { display: none; }

  /* Tabuleiros altos (540 px de altura) nunca passam da tela: a largura acompanha. */
  .pagina-jogo canvas[height="540"] { max-height: calc(100dvh - 215px); width: auto; }

  .pagina-jogo .jogo-layout { gap: 12px; }
  .pagina-jogo .game-shell { gap: 8px; padding-top: 0; width: 100%; }
  .pagina-jogo .game-shell .panel { padding: 6px; }

  /* Placar logo abaixo do título; mensagem logo abaixo do placar. */
  .pagina-jogo .game-shell > .stat-row:first-child { order: -2; gap: 18px; }
  .pagina-jogo .stat .value { font-size: 0.95rem; }
  .pagina-jogo .game-shell > .message { order: -1; min-height: 0; line-height: 1.5; }
  .pagina-jogo .message:empty { display: none; }

  /* Controles na tela: barra fixa no rodapé, ao alcance do polegar. */
  .pagina-jogo #controles.so-toque {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(11, 10, 26, 0.96);
    border-top: 2px solid var(--border);
  }
  .pagina-jogo #controles .ctrl-btn {
    flex: 1;
    min-width: 0;
    height: 56px;
    padding: 0;
  }
  /* Movimento/giro à esquerda; ação (atirar, girar a peça, derrubar) à direita. */
  .pagina-jogo #controles .grupo-mov,
  .pagina-jogo #controles .grupo-acao { display: flex; gap: 8px; min-width: 0; }
  .pagina-jogo #controles .grupo-mov { flex: 3 1 0; }
  .pagina-jogo #controles .grupo-acao { flex: 2 1 0; }
  .pagina-jogo #controles .ctrl-principal { flex: 1.6; font-size: 1.5rem; }
  /* Tetris: os 4 botões de movimento juntos à esquerda; à direita SÓ o de girar,
     separado do "derrubar" para não tocar um no lugar do outro. */
  .pagina-blocos #controles .grupo-mov { flex: 4 1 0; }
  .pagina-blocos #controles .grupo-acao { flex: 1.25 1 0; }
  .pagina-blocos #controles .ctrl-principal { flex: 1; }
  /* Faixa de separação clara entre o grupo de movimento (⏬ ▼ ◀ ▶) e o de girar. */
  .pagina-blocos #controles { gap: 0; }
  .pagina-blocos #controles .grupo-acao {
    margin-left: 22px;
    padding-left: 22px;
    border-left: 2px dashed var(--border);
  }

  /* Blocos: o tabuleiro (proporção 1:2) é dimensionado pela ALTURA da tela, e a
     prévia "Próxima" fica ao lado, pequena, em vez de embaixo. */
  .pagina-blocos .painel-canvas {
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
  }
  .pagina-blocos #game-canvas {
    /* largura = metade da altura disponível, mas sempre deixando 72 px ao lado
       para a prévia "Próxima" (64 px + espaço), para ela não vazar do painel */
    width: min(calc((100vh - 272px) / 2), calc(100% - 72px));
    width: min(calc((100dvh - 272px) / 2), calc(100% - 72px));
    height: auto;
  }
  .pagina-blocos #next-canvas { width: 64px; height: 64px; }
  .pagina-blocos .painel-canvas .dica { font-size: 0.95rem; text-align: center; }

  /* O aviso de conta fica DEPOIS dos controles. "Reiniciar" sobe para logo acima do
     tabuleiro (junto do placar e da mensagem), longe da barra de controles, e fica
     pequeno. */
  .pagina-jogo .game-shell > .dpad { order: 4; }
  .pagina-jogo .game-shell > .aviso-conta { order: 5; font-size: 0.85rem; }
  .pagina-jogo .game-shell > .stat-row:has(> #start-btn),
  .pagina-jogo .game-shell > #reset-btn { order: -1; margin: 0; }
  .pagina-jogo .game-shell > .stat-row:has(> #start-btn) .btn,
  .pagina-jogo .game-shell > #reset-btn { padding: 0 18px; min-height: 40px; font-size: 0.7rem; }
}