/* ============================================================
   Agent Avenue — layout exclusivo para CELULAR (portrait/touch)
   Carregado somente em telas <= 760px (via media no <link>).
   O layout web permanece intacto.

   Racional de usabilidade:
   - Coluna única, na ordem de uma mesa física: OPONENTE no topo
     (como se estivesse sentado à sua frente), TABULEIRO no meio
     e SUA MÃO embaixo — a região de melhor alcance do polegar,
     onde acontecem quase todos os toques do jogo.
   - Mercado negro vira uma fita horizontal rolável no topo:
     é consultado às vezes, não pode roubar altura da tela.
   - O log fica compacto dentro do quadro do oponente (só
     conferência); o botão ⛶ abre o histórico completo.
   - Botões de ação maiores (alvo de toque >= 44px) e modais na
     largura da tela.
   ============================================================ */

header { padding: 6px 8px; gap: 6px; }
header h1 { font-size: 15px; white-space: nowrap; }
/* o modo (básico/avançado) já é visível pela fita do mercado negro;
   esconder a etiqueta evita a quebra torta do cabeçalho no celular */
#game-mode-tag { display: none; }
#turn-indicator { font-size: 11px; white-space: nowrap; }
.header-right { gap: 5px; }
.header-right button, #btn-leave { padding: 7px 8px; font-size: 11px; white-space: nowrap; }
.btn-help { width: 30px; height: 30px; font-size: 14px; flex-shrink: 0; }
.header-left { gap: 6px; min-width: 0; }
/* placar compacto no celular: só os números e nomes curtos */
.scoreboard { padding: 3px 8px; gap: 5px; font-size: 11px; }
.scoreboard .sb-name { max-width: 60px; }
.scoreboard .sb-score b { font-size: 15px; }
.scoreboard .sb-lifetime { display: none; }
.header-right { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }

.game-main { padding: 6px; gap: 6px; }

/* --- mercado negro: fita horizontal rolável --- */
.bm-bar { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; }
.bm-bar h2 { font-size: 13px; }
#bm-supply {
  overflow-x: auto; justify-content: flex-start;
  -webkit-overflow-scrolling: touch; padding-bottom: 4px;
}
.bm-bar .bmcard { min-width: 232px; max-width: 232px; flex: 0 0 auto; }

/* --- coluna única: oponente -> tabuleiro -> você --- */
.game-grid { display: flex; flex-direction: column; gap: 8px; }
.opp-zone { order: 0; }
.board-wrap { order: 1; }
.my-zone { order: 2; }
.side-col { max-height: none; min-height: 0; overflow: visible; }

/* oponente compacto (informação, não interação) */
.opp-zone .zone-head { font-size: 12px; line-height: 1.5; }
.opp-zone .inplay { grid-template-columns: repeat(auto-fill, minmax(42px, 54px)); gap: 5px; }
.opp-zone .bm-inplay .bmcard { max-width: 46vw; font-size: 10px; }
.opp-zone .bm-inplay .bmcard .bm-art { height: 30px; }

/* tabuleiro: largura total, altura contida para a mão caber na 1ª tela */
#board { max-height: 37vh; }
/* nomes dos jogadores sob os peões maiores (o SVG encolhe no celular) */
.meeple text { font-size: 20px; stroke-width: 4.5px; }
#center-area { inset: 60px 48px; }
#played-cards { gap: 8px; }
.prompt { font-size: 13px; }
#action-buttons button { padding: 10px 14px; }

/* sua área: mão em 1 linha na largura toda, toque confortável */
.my-zone .zone-caption { font-size: 10px; }
.hand { gap: 5px; }
.hand .card { max-width: none; }
.card .pt-label { font-size: 9px; }
#hand-actions { gap: 6px; }
#hand-actions button { padding: 12px 14px; font-size: 14px; flex: 1 1 auto; }
.inplay { grid-template-columns: repeat(auto-fill, minmax(48px, 62px)); gap: 6px; }
.bm-inplay .bmcard { max-width: 46vw; }

/* log: também vira ícone 📜 acima do chat (a caixinha fica oculta) */
#log-fab { width: 42px; height: 42px; right: 10px; bottom: 58px; }

/* chat: painel quase em tela cheia, acima dos balões */
#chat-fab { width: 42px; height: 42px; right: 10px; bottom: 10px; }
#chat-panel { width: 94vw; right: 3vw; bottom: 106px; height: 44vh; }

/* modais na largura da tela */
.modal-box, .help-box { width: 94vw; max-width: 94vw; padding: 18px; }
.help-content { max-height: 66vh; font-size: 13px; }
.help-table { font-size: 11px; }
.zoom-box img { max-height: 54vh; }
#zoom-caption { font-size: 13px; }
.stat span { font-size: 24px; }

/* lobby em coluna única com toque confortável */
.lobby-main { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
.table-row { padding: 10px; }
.table-row button { padding: 10px 14px; }
#online-list li { padding: 8px 0; }
#online-list li button { padding: 8px 12px; font-size: 13px; }