/* Camada estrutural de tela pequena.
 *
 * A tipografia NÃO é resolvida aqui: uma regra CSS não sabe se o elemento já
 * estava legível, então um `small{font-size:10px}` global esmagava títulos de
 * 23px e 42px junto. O piso de fonte virou uma passada de medição em
 * readable-shell-v5.js, que só sobe o que está abaixo do mínimo.
 *
 * O que fica aqui é o que CSS resolve bem: nenhuma janela empurrando a página,
 * janela ocupando a tela inteira no celular e alvos de toque com área mínima.
 */

/* Raízes de janela do jogo — em sincronia com ROOT_SELECTOR de
   shinobi-ornate-ui.js. Tela nova entra aqui também. */
body:is(.nrmt-display-mobile, .nrmt-display-compact) :is(
  .nrmt-ninja-overlay, .nrmt-inventory-overlay, .nrmt-shop-overlay,
  .nrmt-hunts-overlay, .nrmt-market-overlay, .nrmt-craft-overlay,
  .nrmt-smith-overlay, .nrmt-edo-overlay, .nrmt-pvp-overlay,
  .nrmt-ranking-overlay, .nrmt-pass-overlay, .nrmt-depot-overlay,
  .nrmt-trade-overlay, .nrmt-game-overlay, .nrmt-mailbox, .xp-overlay,
  .nto-content-overlay, .modal-overlay, .admin-overlay,
  #nrmt-vip-store-v2, #nrmt-ramen-store, #nrmt-skins, #nrmt-covil
) {
  max-width: 100vw;
  overflow-x: hidden;
}

body:is(.nrmt-display-mobile, .nrmt-display-compact) :is(
  .nrmt-ninja-window, .nrmt-inventory-window, .nrmt-shop-window,
  .nrmt-hunts-window, .nrmt-market-window, .nrmt-craft-window,
  .nrmt-smith-window, .nrmt-edo-window, .nrmt-pvp-window,
  .nrmt-ranking-window, .nrmt-pass-window, .nrmt-depot-window,
  .nrmt-trade-window, .nrmt-mailbox__window, .nrmt-ramen-window,
  .nrmt-skin-window, .nrmt-vip-store, .nrmt-bi-helper__window,
  .nrmt-bi-rotation__window, .xp-config-window, .xp-window, .nrmt-admin-window
) {
  max-width: 100vw;
}

/* Caixas de marcar não escalam junto com a fonte: precisam de área própria. */
body:is(.nrmt-display-mobile, .nrmt-display-compact) input[type="checkbox"],
body:is(.nrmt-display-mobile, .nrmt-display-compact) input[type="radio"] {
  width: 22px;
  height: 22px;
  accent-color: #c08a2c;
}

/* Controles nativos: abaixo de 12px o iOS dá zoom no foco e reposiciona a
   tela inteira. O mínimo aqui evita esse salto. */
body:is(.nrmt-display-mobile, .nrmt-display-compact) :is(
  .nrmt-ninja-overlay, .nrmt-inventory-overlay, .nrmt-shop-overlay,
  .nrmt-hunts-overlay, .nrmt-market-overlay, .nrmt-smith-overlay,
  .nrmt-edo-overlay, .nrmt-pvp-overlay, .nrmt-ranking-overlay,
  .nrmt-pass-overlay, .nrmt-depot-overlay, .nrmt-trade-overlay,
  .nrmt-mailbox, .nrmt-bi-helper, .nrmt-bi-rotation, .xp-overlay,
  .admin-overlay, #nrmt-vip-store-v2, #nrmt-ramen-store, #nrmt-skins,
  #nrmt-covil, #nrmt-comms-center
) :is(select, input[type="text"], input[type="search"], input[type="number"]) {
  min-height: 36px;
  font-size: max(12px, 1em);
}

/* Em celular a janela ocupa a tela toda: moldura e margem só comem área útil
   num aparelho de 375px. */
@media (max-width: 620px) {
  body.nrmt-display-mobile :is(
    .nrmt-ninja-window, .nrmt-inventory-window, .nrmt-shop-window,
    .nrmt-hunts-window, .nrmt-market-window, .nrmt-smith-window,
    .nrmt-edo-window, .nrmt-pvp-window, .nrmt-ranking-window,
    .nrmt-pass-window, .nrmt-depot-window, .nrmt-trade-window,
    .nrmt-skin-window, .nrmt-vip-store
  ) {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
  }

  body.nrmt-display-mobile :is(
    .nrmt-ninja-overlay, .nrmt-inventory-overlay, .nrmt-shop-overlay,
    .nrmt-hunts-overlay, .nrmt-market-overlay, .nrmt-smith-overlay,
    .nrmt-edo-overlay, .nrmt-pvp-overlay, .nrmt-ranking-overlay,
    .nrmt-pass-overlay, .nrmt-depot-overlay, .nrmt-trade-overlay, #nrmt-skins
  ) {
    padding: 0 !important;
  }
}

/* Cabeçalhos e navs montados como uma linha única empurram o último item
   para fora da tela — no Mercado era o próprio botão de fechar que sumia,
   deixando a janela sem saída no celular. Em tela pequena a linha quebra. */
body:is(.nrmt-display-mobile, .nrmt-display-compact) :is(
  .nrmt-market-window, .nrmt-ranking-window, .nrmt-depot-window,
  .nrmt-trade-window, .nrmt-pass-window, .nrmt-mailbox__window
) > header {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body:is(.nrmt-display-mobile, .nrmt-display-compact) :is(
  .nrmt-market-overlay, .nrmt-ranking-overlay, .nrmt-depot-overlay,
  .nrmt-trade-overlay, .nrmt-pass-overlay, .nrmt-mailbox
) :is(nav, .nrmt-market-wallet) {
  flex-wrap: wrap;
}

/* Sem min-width:0 um filho flex nunca encolhe abaixo do próprio conteúdo e
   continua empurrando a linha mesmo depois do wrap. */
body:is(.nrmt-display-mobile, .nrmt-display-compact) :is(
  .nrmt-market-window, .nrmt-ranking-window, .nrmt-depot-window,
  .nrmt-trade-window, .nrmt-pass-window, .nrmt-mailbox__window
) > header > * {
  min-width: 0;
  max-width: 100%;
}

/* O fechar tem de continuar alcançável mesmo se o resto do cabeçalho crescer. */
body:is(.nrmt-display-mobile, .nrmt-display-compact) :is(
  .nrmt-market-window, .nrmt-ranking-window, .nrmt-depot-window,
  .nrmt-trade-window, .nrmt-pass-window, .nrmt-mailbox__window
) > header > :is(button[class*="close"], .nrmt-ui-icon-close) {
  order: -1;
  margin-left: auto;
}

/* Rolar dentro da janela não pode arrastar a página atrás dela. */
body:is(.nrmt-display-mobile, .nrmt-display-compact) :is(
  .nrmt-ninja-window, .nrmt-inventory-window, .nrmt-shop-window,
  .nrmt-hunts-window, .nrmt-smith-window, .nrmt-edo-window, .nrmt-pvp-window
) :is(main, aside, section) {
  overscroll-behavior: contain;
}