/* css/mobile-hud.css — ajustes de HUD para telefone/toque.
 *
 * Carregado DEPOIS de style.css: as regras aqui vencem por ordem de fonte, sem
 * precisar de !important — exceto a coluna da grade, porque style.css legado
 * ainda possui um !important específico para grid-template-columns.
 */

/* ─────────── Joystick FIXO ───────────
 * A base NÃO flutua mais sob o polegar: movemento sai somente do círculo
 * (#joystick), para que tocar em qualquer outro ponto da tela (ex.: inimigo)
 * nunca vire movimento. (O modo dinâmico joy-float foi removido a pedido.) */

/* Realce de toque: sem flash cinza do navegador sobre os controles. */
#gameUI button, #gameUI .joystick { -webkit-tap-highlight-color: transparent; }

/* ─────────── Fila de evento (todas as larguras) ─────────── */
#eventQueueCard {
  position: fixed; right: 14px; top: 300px; z-index: 49;
  width: min(260px, calc(100vw - 28px));
  color: #f3ead1; font: 13px/1.45 Arial, sans-serif;
}
#eventQueueCard .event-queue-card {
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(255, 214, 122, .3);
  background: rgba(8, 12, 18, .88);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
#eventQueueCard h3 { margin: 0 0 6px; font: 700 14px 'Cinzel', serif; color: #ffd977; }
#eventQueueCard p { margin: 3px 0; font-size: 12px; color: #dfd5ba; }
#eventQueueCard button {
  width: 100%; margin-top: 8px; min-height: 38px; padding: 8px 12px;
  border: 1px solid var(--gold-dk); border-radius: 8px;
  background: linear-gradient(#b64b2e, #712116);
  color: #fff4cf; font: 700 12px 'Cinzel', serif; cursor: pointer;
}

@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {

  /* No celular a fila entra na mesma coluna curta do resto do HUD e o botão
   * ganha alvo de toque cheio. */
  #eventQueueCard {
    right: max(8px, env(safe-area-inset-right));
    top: auto; bottom: 292px;
    width: min(240px, calc(100vw - 16px));
  }
  #eventQueueCard button { min-height: 44px; }

  /* ─────────── Evento: somente botão ─────────── */
  #eventTracker.evt-mobile {
    position: fixed;
    top: 170px;
    right: max(8px, env(safe-area-inset-right));
    left: auto; bottom: auto;
    width: auto; min-width: 0; max-width: calc(100vw - 16px);
    max-height: none; overflow: visible;
    padding: 0; border: 0; background: none;
    box-shadow: none; backdrop-filter: none;
    z-index: 51;
  }

  #eventTracker.evt-mobile .evt-fab {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    min-width: 104px; min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(255, 214, 122, .55);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(26, 18, 11, .96), rgba(10, 8, 12, .96));
    color: #ffd977;
    font: 700 11px/1 'Cinzel', serif;
    letter-spacing: .04em;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .55);
    cursor: pointer;
  }

  #eventTracker.evt-mobile .evt-fab-icon { font-size: 16px; line-height: 1; }
  #eventTracker.evt-mobile .evt-fab-copy { white-space: nowrap; }
  #eventTracker.evt-mobile .evt-fab-hp { color: #ffb08a; font: 700 10px/1 Arial, sans-serif; }

  /* ─────────── Controles de ação ───────────
   * Antes: seis botões absolutos dentro de 180x150; Teleporte e Interagir nem
   * possuíam coordenadas próprias e caiam sobre os demais. Agora todos têm um
   * slot determinístico e os espaços continuam iguais em qualquer proporção. */
  .mobile-actions {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 210px;
    height: 144px;
    display: grid;
    grid-template-columns: 54px 78px 54px !important;
    grid-template-rows: 54px 78px;
    gap: 12px;
    align-items: center;
    justify-items: center;
    pointer-events: none;
    transform: none;
  }

  .mobile-actions button,
  .mobile-actions .attack-main {
    position: static;
    margin: 0;
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    border-radius: 50%;
    font-size: 21px;
  }

  #mobileTeleport { grid-column: 1; grid-row: 1; }
  #mobileInteract { grid-column: 2; grid-row: 1; }
  #mobileMenu { grid-column: 3; grid-row: 1; width: 54px; height: 54px; font-size: 20px; }
  #mobileTarget { grid-column: 1; grid-row: 2; }
  #mobileAttack {
    grid-column: 2; grid-row: 2;
    width: 78px; height: 78px; min-width: 78px; min-height: 78px;
    font-size: 31px;
  }
  #mobileJump { grid-column: 3; grid-row: 2; }

  /* Barra de habilidades: duas linhas alinhadas e um intervalo físico antes dos
   * controles circulares. Não usa flex-wrap/justify-end, que mudava a posição
   * dos botões conforme a quantidade de habilidades da classe. */
  #actionBar {
    left: auto;
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(174px + env(safe-area-inset-bottom));
    transform: none;
    display: grid;
    grid-template-columns: repeat(4, 44px);
    gap: 7px;
    max-width: none;
    padding: 7px;
    justify-content: initial;
    align-content: initial;
    border-radius: 12px;
  }
  #actionBar .abtn { width: 44px !important; height: 44px !important; }

  /* O rastreador de missões continua disponível, mas nunca cresce por cima do
   * bloco de controles. */
  #questTracker {
    top: 224px;
    max-height: 31vh;
    overflow-y: auto;
  }

  /* ─────────── Chat: o ✕ tem que estar sempre alcançável ─────────── */
  .chat-tabs { padding-right: 0; }
  .chat-close {
    position: sticky; right: 0;
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 30px;
    margin-left: auto; padding: 0;
    border: 1px solid var(--gold-dk); border-radius: 6px;
    background: #12151df2;
    color: #ffd977; font-size: 15px; line-height: 1;
  }
  .chat-tabs .ctab:last-of-type { margin-right: 6px; }

  /* O chat aberto vira uma folha/modal própria no telefone. O layout antigo
   * mantinha 46vw e 32vh mesmo depois de abrir, comprimindo o histórico e
   * deixando o fechamento fora do toque. */
  #chatBox.chat-open {
    left: 50%; top: 50%; right: auto; bottom: auto;
    width: min(92vw, 540px); min-width: 0;
    height: min(72vh, 560px); max-height: calc(100vh - 24px);
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column;
    padding: 8px 10px 10px;
    border: 1px solid var(--gold-dk); border-radius: 14px;
    background: rgba(8, 12, 18, .97);
    box-shadow: 0 18px 50px #000d, 0 0 0 1px #ffe9a81a;
    opacity: 1; z-index: 70; pointer-events: auto;
  }
  #chatBox.chat-open .chat-tabs {
    position: relative; flex: 0 0 auto; overflow: visible; align-items: center;
    margin-bottom: 6px; padding: 0 50px 0 0; min-height: 38px;
  }
  #chatBox.chat-open .chat-close {
    position: absolute; right: 0; top: 0; margin: 0; z-index: 2; flex: 0 0 44px;
    width: 44px; min-width: 44px; height: 38px; min-height: 38px;
    padding: 0; border: 1px solid var(--gold-dk); border-radius: 8px;
    background: #12151df2; color: #ffd977; font: 700 17px/1 Arial, sans-serif;
    cursor: pointer; touch-action: manipulation;
  }
  #chatBox.chat-open #chatLog {
    flex: 1 1 auto; min-height: 0; height: auto; max-height: none;
    overflow-y: auto; overscroll-behavior: contain;
  }
  #chatBox.chat-open .chat-input-row {
    display: flex; flex: 0 0 auto; align-items: center; gap: 6px;
    margin-top: 6px;
  }
  #chatBox.chat-open #chatInput { flex: 1 1 auto; min-width: 0; font-size: 16px; }
  #chatBox.chat-open #chatAttachBtn { display: inline-flex; align-items: center; justify-content: center; }
  #chatBox.chat-open #chatMentions { max-height: 22vh; flex: 0 0 auto; }
}

/* O Nexária usa o celular em paisagem. Esta regra vence os estilos de
 * telefone em pé e mantém o diálogo legível no espaço vertical reduzido. */
@media (orientation: landscape) and (max-height: 560px) {
  #chatBox.chat-open {
    width: min(78vw, 620px);
    height: min(82vh, 390px);
    max-height: calc(100vh - 16px);
  }
  #chatBox.chat-open #chatLog { font-size: 12px; line-height: 1.4; }
}

/* Telefones estreitos: preserva a mesma disposição, apenas reduz o módulo como
 * um todo. O ataque continua maior e central; nada volta a se sobrepor. */
@media (max-width: 430px) {
  .mobile-actions {
    right: max(7px, env(safe-area-inset-right));
    bottom: max(9px, env(safe-area-inset-bottom));
    width: 184px;
    height: 127px;
    grid-template-columns: 48px 70px 48px !important;
    grid-template-rows: 48px 70px;
    gap: 9px;
  }
  .mobile-actions button,
  .mobile-actions .attack-main,
  #mobileMenu {
    width: 48px; height: 48px; min-width: 48px; min-height: 48px;
    font-size: 19px;
  }
  #mobileAttack {
    width: 70px; height: 70px; min-width: 70px; min-height: 70px;
    font-size: 28px;
  }
  #actionBar {
    right: max(7px, env(safe-area-inset-right));
    bottom: calc(151px + env(safe-area-inset-bottom));
    grid-template-columns: repeat(4, 40px);
    gap: 5px;
    padding: 6px;
  }
  #actionBar .abtn { width: 40px !important; height: 40px !important; font-size: 20px; }
}

/* Landscape baixo, como o print enviado: minimapa, evento, habilidades e
 * controles ganham faixas próprias. Missões podem ser abertas pelo log em vez
 * de ocupar a pouca altura disponível permanentemente. */
@media (max-height: 560px) and (pointer: coarse) {
  #minimapWrap { transform: scale(.68); transform-origin: top right; }
  #eventTracker.evt-mobile {
    top: 145px;
    left: max(9px, env(safe-area-inset-left, 0px));
    right: auto;
  }
  #actionBar {
    bottom: calc(158px + env(safe-area-inset-bottom));
    grid-template-columns: repeat(4, 40px);
    gap: 5px;
    padding: 6px;
  }
  #actionBar .abtn { width: 40px !important; height: 40px !important; font-size: 20px; }
  .mobile-actions {
    transform: scale(.92);
    transform-origin: bottom right;
  }
  #questTracker { display: none; }
  #eventQueueCard { display: none !important; }
}

/* ─────────── Tablet e landscape sem sinalização de toque ───────────
 * Alguns PWA/webviews não expõem `pointer: coarse` mesmo em uma tela touch.
 * O breakpoint por largura mantém a mesma geometria segura em 768px e em
 * telefones na horizontal, sem alterar o desktop largo. */
@media (pointer: coarse) and (min-width: 761px) and (max-width: 900px), (max-height: 500px) and (min-width: 761px) and (max-width: 900px) {
  #mobileControls { display: block; }

  #eventTracker.evt-mobile { top: 184px; }

  #mobileControls .joystick {
    left: max(16px, env(safe-area-inset-left, 0px));
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
    width: 132px;
    height: 132px;
  }

  .mobile-actions {
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
    width: 224px;
    height: 154px;
    display: grid;
    grid-template-columns: 58px 84px 58px !important;
    grid-template-rows: 58px 84px;
    gap: 12px;
    align-items: center;
    justify-items: center;
    pointer-events: none;
    transform: none;
  }

  .mobile-actions button,
  .mobile-actions .attack-main {
    position: static;
    margin: 0;
    width: 58px;
    height: 58px;
    min-width: 58px;
    min-height: 58px;
    border-radius: 50%;
    font-size: 22px;
  }

  #mobileTeleport { grid-column: 1; grid-row: 1; }
  #mobileInteract {
    grid-column: 2;
    grid-row: 1;
    width: 84px;
    min-width: 84px;
    height: 58px;
    min-height: 58px;
  }
  #mobileMenu { grid-column: 3; grid-row: 1; width: 58px; height: 58px; }
  #mobileTarget { grid-column: 1; grid-row: 2; }
  #mobileAttack {
    grid-column: 2;
    grid-row: 2;
    width: 84px;
    height: 84px;
    min-width: 84px;
    min-height: 84px;
    font-size: 33px;
  }
  #mobileJump { grid-column: 3; grid-row: 2; }

  #actionBar {
    left: 50%;
    right: auto;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(4, 46px);
    gap: 7px;
    max-width: none;
    padding: 7px;
  }
  #actionBar .abtn { width: 46px !important; height: 46px !important; }

  /* Chat no toque: por padrão só o TEXTO (sem input/anexos); tocar abre o modal. */
  #chatBox { left:8px; top:78px; right:auto; bottom:auto; width:min(46vw,320px); max-height:32vh; display:block; } #chatBox:not(.chat-open) #chatLog { max-height:calc(32vh - 20px); overflow:hidden; }
  #chatBox:not(.chat-open) :is(#chatPinned, #chatInput, #chatAttachBtn, #chatCloseBtn, #chatAttachPicker) { display:none !important; }

  #specialHint {
    bottom: calc(198px + env(safe-area-inset-bottom, 0px));
    max-width: min(60vw, 480px);
    white-space: normal;
    text-align: center;
  }
  #questTracker {
    top: 242px;
    right: max(12px, env(safe-area-inset-right, 0px));
    width: 190px;
    max-height: 34vh;
    overflow-y: auto;
  }
  #minimapWrap { top: 12px; right: max(12px, env(safe-area-inset-right, 0px)); transform: scale(.86); transform-origin: top right; }
  #targetFrame { top: 82px; left: max(12px, env(safe-area-inset-left, 0px)); transform: scale(.88); transform-origin: top left; }
  #playerFrame { top: 12px; left: max(12px, env(safe-area-inset-left, 0px)); transform: scale(.88); transform-origin: top left; }
  #buffBar { top: 76px; left: max(12px, env(safe-area-inset-left, 0px)); transform: scale(.88); transform-origin: top left; }
  #xpWrap { bottom: max(12px, env(safe-area-inset-bottom, 0px)); width: min(44vw, 300px); }
  #microMenu { display: none; }
  #chatToggleBtn { bottom: calc(186px + env(safe-area-inset-bottom, 0px)); }
  #chatBox { bottom: calc(186px + env(safe-area-inset-bottom, 0px)); }
}