/* Overrides tardios separados do núcleo mobile para manter o limite de
 * tamanho por arquivo sem alterar a ordem de precedência visual. */
/* Paisagem curta também precisa funcionar quando o webview não informa
 * `pointer: coarse` (por exemplo, teste automatizado ou modo desktop do PWA). */
@media (pointer: coarse) and (min-width: 761px) and (max-width: 900px) and (max-height: 560px), (max-height: 500px) and (min-width: 761px) and (max-width: 900px) and (max-height: 560px) {
  #mobileControls .joystick {
    width: 116px;
    height: 116px;
    left: max(12px, env(safe-area-inset-left, 0px));
    bottom: max(9px, env(safe-area-inset-bottom, 0px));
  }
  #joystickKnob { width: 51px; height: 51px; }
  .mobile-actions {
    right: max(9px, env(safe-area-inset-right, 0px));
    bottom: max(9px, env(safe-area-inset-bottom, 0px));
    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;
  }
  #mobileInteract { width: 70px; min-width: 70px; height: 48px; min-height: 48px; }
  #mobileAttack { width: 70px; height: 70px; min-width: 70px; min-height: 70px; font-size: 28px; }
  /* Dock estilo macOS: linha única de ícones entre o joystick e as ações. */
  #actionBar { left:158px; right:238px; bottom:max(10px, env(safe-area-inset-bottom, 0px)); transform:none; display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:3px; padding:5px 8px; border-radius:20px; background:rgba(10,13,20,.55); backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2); border:1px solid rgba(255,233,168,.18); box-shadow:0 10px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); }
  #actionBar .abtn { width:30px !important; height:30px !important; font-size:16px; flex:0 0 auto; border-radius:9px; transition:transform .12s ease; }
  #actionBar .abtn .key { display:none; }
  #actionBar .abtn-locked .count { display:none; }
  #actionBar .abtn-locked .aicon { font-size:15px; opacity:.8; }
  #actionBar .abtn:hover { transform:translateY(-3px) scale(1.08); }
  #actionBar .abtn:active { transform:scale(.9); }
  #specialHint { bottom: calc(178px + env(safe-area-inset-bottom, 0px)); max-width: 52vw; font-size: 12px; }
  #questTracker { display: none; }
  #eventQueueCard { display: none !important; }
  #eventTracker.evt-mobile { top: 145px; }
  #minimapWrap { transform: scale(.68); }
  /* Chat no toque: por padrão só o TEXTO flutuando (sem input/anexos); tocar no texto abre o modal central — mobile ou joga ou conversa. */
  #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), #chatToggleBtn { display:none !important; }
  #chatBox.chat-open { left:50%; top:50%; right:auto; bottom:auto; transform:translate(-50%,-50%); width:min(92vw,540px); height:min(72vh,560px); max-height:none; display:flex; flex-direction:column; border-radius:14px; } #chatBox.chat-open #chatLog { flex:1; max-height:none; overflow-y:auto; }
  /* Nada nasce sobre a dock: status/XP sobem; pílula de online empilha abaixo do status. */
  #saveStatus { top:7px; bottom:auto; } #onlineCount { top:34px; } #xpWrap { bottom:64px; }
}

/* A hidden contextual action must not leave a transparent hit area over the
 * attack controls. */
#mobileInteract[hidden] { display:none !important; } #minimapWrap { cursor:pointer; } #mobileAttack[hidden], #mobileTarget[hidden] { display:none !important; }
#onlineCount { position:fixed; top:8px; left:50%; transform:translateX(-50%); z-index:21; padding:3px 10px; border-radius:999px; background:rgba(8,12,18,.72); color:#dff6df; font:700 11px Arial,sans-serif; pointer-events:none; border:1px solid rgba(255,224,138,.32); }
.chat-attach-btn { min-width:44px; min-height:44px; border-radius:10px; border:1px solid #4a4234; background:#181d28; color:#b9c8e8; font-size:19px; cursor:pointer; flex:0 0 auto; }
#mobileInteract:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 7px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1;
}
#mobileInteract .mobile-interact-icon { font-size: 19px; line-height: 1; }
#mobileInteract .mobile-interact-label { white-space: nowrap; }
#mobileInteract:disabled { opacity: .55; filter: grayscale(.8); }

/* O Nexária não gira o body para simular landscape. Em retrato touch o gate
 * cobre a aplicação inteira; em landscape a árvore permanece no viewport real,
 * mantendo hit-testing, raycast e botões no mesmo sistema de coordenadas. */
html.mobile-portrait-lock,
html.mobile-portrait-lock body { overflow:hidden !important; }
html.mobile-portrait-lock body > :not(#rotateOverlay) {
  visibility:hidden !important;
  pointer-events:none !important;
}
html.mobile-portrait-lock #rotateOverlay {
  display:flex !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

/* Último override: alguns webviews de telefone em paisagem também entram nas
 * regras de tablet abaixo. Esta declaração fica no fim para preservar a
 * proporção deitada do diálogo em vez de deixar uma altura de desktop vencer. */
@media (orientation: landscape) and (max-height: 560px) {
  #chatBox.chat-open {
    width: min(78vw, 620px) !important;
    height: min(82vh, 390px) !important;
    max-height: calc(100vh - 16px) !important;
  }
}