/* TELA DO PRÊMIO DE CARTA no celular deitado (rodada 4, ponto 2 do dono: "a tela de carta está cortando, ou corta em cima ou corta embaixo").
   Antes: no 844x390 a janela tinha 421 px de conteúdo para 352 de altura e o título ficava cortado em cima.
   Agora: janela mais enxuta e a carta ocupa o que sobra da altura da tela (--carta-h). Só vale em tela baixa; PC e celular em pé não mudam.
   Provisório: aprovar com o print ANTES e DEPOIS (prints/rodada4-salas-premio-*). Arquivo das SALAS, ligado no index.html. */
@media (max-height: 560px) {
  .tela-fundo.recompensa { padding: 6px 12px; }
  .tela-fundo.recompensa .janela { padding: 6px 14px 8px; border-width: 2px; border-radius: 14px; max-height: calc(100vh - 12px); }
  .tela-fundo.recompensa .janela h2 { font-size: 20px; text-shadow: 0 2px 0 var(--bordo-esc); }
  .tela-fundo.recompensa .janela .sub { margin: 1px 0 2px; font-size: 12px; line-height: 1.2; }
  .tela-fundo.recompensa .janela .corpo { margin: 0 0 4px; }
  /* altura da carta = tela - 196 px (título, subtítulo, "combina com", botão e folgas); nunca menos de 104 px */
  .tela-fundo.recompensa .grade-cartas { --carta-h: clamp(104px, calc(100vh - 196px), 200px); gap: 16px; flex-wrap: nowrap; padding: 6px 0 0; }
  .tela-fundo.recompensa .premio-opcao { gap: 4px; }
  .tela-fundo.recompensa .premio-opcao .combina-com { font-size: 10.5px; line-height: 1.2; padding: 2px 7px; max-width: 170px; }
  .tela-fundo.recompensa .janela .botoes .btn { min-height: 36px; padding: 5px 18px; font-size: 14px; }
}