/* css/mobile-panels.css — painéis como folhas de fundo no toque.
 *
 * Carregado DEPOIS de mobile-hud.css. No celular, janelas centrais flutuantes
 * viram folhas ancoradas embaixo: área útil máxima, rolagem previsível e o ✕
 * sempre alcançável — sem botões aparecendo por cima dos controles do jogo
 * (a folha cobre a coluna direita apenas enquanto está aberta).
 */

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

  .panel {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(76vh, calc(100vh - 90px));
    max-height: min(76dvh, calc(100dvh - 90px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: 16px 16px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -14px 34px rgba(0, 0, 0, .55);
    z-index: 80;
  }

  /* Fechar tem que ser um alvo de toque de verdade, em qualquer painel. */
  .panel [data-close] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }

  /* Ações primárias com alvo confortável (não afeta chips/filtros pequenos). */
  .panel .btn,
  .panel button.primary,
  .panel .modal-actions button {
    min-height: 44px;
  }

  /* Campos de formulário: mínimo 14px evita zoom automático do iOS no foco. */
  .panel input[type="text"],
  .panel input[type="password"],
  .panel input[type="number"],
  .panel input[type="email"],
  .panel textarea {
    font-size: 14px;
  }
}

/* Telefones estreitos: a folha ocupa um pouco menos de altura para o jogador
 * ainda enxergar o mundo atrás ao arrastar. */
@media (max-width: 430px) and (pointer: coarse) {
  .panel {
    max-height: min(72vh, calc(100vh - 84px));
    max-height: min(72dvh, calc(100dvh - 84px));
  }
}

/* ================= §8 Árvore de Habilidades (skill-tree.js) ================= */
.stree-body { display: flex; flex-direction: column; gap: 10px; padding: 10px; overflow-y: auto; max-height: inherit; }
.stree-section { background: rgba(0,0,0,.25); border: 1px solid #ffd24a22; border-radius: 10px; padding: 8px; }
.stree-section h4 { margin: 2px 2px 8px; color: #ffd24a; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; }
.stree-node { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; background: rgba(255,255,255,.04); margin-bottom: 6px; cursor: pointer; min-height: 44px; }
.stree-node:hover { background: rgba(255,210,74,.12); }
.stree-node.learned { border-left: 3px solid #5ada5a; }
.stree-node.locked { opacity: .75; }
.stree-node.locked-level .stree-name::after { content: ' 🔒'; font-size: 11px; }
.stree-icon { font-size: 18px; width: 24px; text-align: center; }
.stree-name { flex: 1; font-size: 13px; }
.stree-passive { color: #7ec8ff; font-style: italic; font-size: 10px; }
.stree-badge { font-size: 11px; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.stree-badge.ok { color: #0a1a0a; background: #5ada5a; }
.stree-badge.xp { color: #ffd24a; background: rgba(255,210,74,.15); border: 1px solid #ffd24a55; }
.stree-badge.src { color: #b06dff; background: rgba(176,109,255,.15); border: 1px solid #b06dff55; }
.stree-race-passive { font-size: 12px; color: #cfe8cf; padding: 6px 8px; background: rgba(126,200,255,.08); border-radius: 8px; margin-bottom: 6px; }

/* A tela de entrada pode exceder também um desktop baixo (por exemplo, quando
 * a escala do sistema aumenta). O scroll pertence à entrada, não ao jogo. */
#startScreen {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

#startScreen .start-bg {
  position: fixed;
  pointer-events: none;
}

#startScreen .start-content {
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ================= Entrada PWA: viewport adaptativo =================
 * html/body continuam sem scroll durante o jogo, mas a tela de entrada precisa
 * ser um scroll container próprio: em retrato baixo o formulário e o rodapé
 * excedem a altura visual. Centralizar um filho maior que um flex viewport
 * deslocava seu topo para fora da tela e overflow:hidden tornava o corte
 * impossível de recuperar por gesto.
 */
@media (max-width: 760px), (pointer: coarse), (max-height: 560px) {
  #startScreen {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
  }

  /* O fundo não deve aumentar o scrollHeight por causa do inset negativo e da
   * animação de escala; somente conteúdo editorial pode criar rolagem. */
  #startScreen .start-bg {
    position: fixed;
    pointer-events: none;
  }

  #startScreen .start-content {
    width: 100%;
    min-height: 100%;
    margin: 0 auto;
    padding: clamp(14px, 3.5vw, 24px) max(12px, env(safe-area-inset-right, 0px))
      clamp(18px, 4vw, 30px) max(12px, env(safe-area-inset-left, 0px));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #startScreen .game-logo-mark {
    width: clamp(210px, 68vw, 292px);
    margin-bottom: clamp(5px, 1.8vw, 10px);
  }

  #startScreen .start-sub {
    margin-bottom: clamp(10px, 3vw, 18px);
    font-size: clamp(10px, 2.8vw, 13px);
    letter-spacing: clamp(2px, .8vw, 4px);
    line-height: 1.35;
  }

  #startScreen .portal-card {
    width: min(100%, 520px);
    padding: clamp(12px, 3.5vw, 18px);
    border-radius: 12px;
  }

  #startScreen .portal-tabs {
    gap: 6px;
    margin-bottom: 14px;
  }

  #startScreen .portal-tab,
  #startScreen .portal-secondary,
  #startScreen .portal-primary {
    min-height: 48px;
  }

  #startScreen .portal-tab {
    padding: 9px 8px;
    font-size: clamp(11px, 3vw, 13px);
  }

  #startScreen .auth-form input,
  #startScreen .portal-card input {
    min-height: 48px;
    font-size: 16px;
  }

  #startScreen .portal-primary {
    width: 100%;
    padding: 12px 14px;
    font-size: clamp(13px, 3.6vw, 16px);
    letter-spacing: clamp(1px, .55vw, 2px);
  }

  /* O lobby cresce com o conteúdo para usar o scroll do #startScreen, em vez
   * de criar uma segunda caixa estreita que corta ações no telefone. */
  #startScreen .lobby-card {
    max-height: none;
    overflow: visible;
  }

  #startScreen .lobby-head {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  #startScreen .lobby-head > div:last-child {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 7px;
  }

  #startScreen .lobby-head > div:last-child button {
    flex: 1 1 120px;
    min-height: 44px;
  }

  #startScreen .character-card button,
  #startScreen #showCreateCharacter {
    min-height: 44px;
  }

  #startScreen .start-foot {
    line-height: 1.5;
    padding-bottom: 4px;
  }
}

/* Altura reduzida: prioriza o topo do formulário e deixa a marca/rodapé
 * alcançáveis pela rolagem, sem espremer campos abaixo do alvo de toque. */
@media (max-height: 700px) and (max-width: 900px) {
  #startScreen .start-content {
    justify-content: flex-start;
    padding-top: 12px;
  }

  #startScreen .game-logo-mark {
    width: clamp(178px, 52vw, 238px);
  }

  #startScreen .start-sub {
    margin-bottom: 10px;
  }
}

/* Paisagem curta: login ao lado da marca em duas colunas — a entrada inteira
 * cabe sem rolagem. Alvos de toque e fonte de input preservados (44/48px, 16px);
 * a entrada segue rolável como rede de segurança se o teclado abrir. */
@media (orientation: landscape) and (max-height: 560px) {
  #startScreen .start-content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    justify-content: center;
    align-items: center;
    column-gap: clamp(22px, 4vw, 44px);
    row-gap: 8px;
    padding: 12px max(14px, env(safe-area-inset-right, 0px)) 10px max(14px, env(safe-area-inset-left, 0px));
  }

  #startScreen .game-logo-mark {
    grid-column: 1;
    grid-row: 1;
    width: min(170px, 38vh);
    margin: 0 auto;
  }

  #startScreen .start-sub {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    max-width: 26vh;
    line-height: 1.45;
  }

  /* Dois IDs: vence #startScreen .portal-card na cascata. */
  #startScreen #authPanel {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: min(440px, 100%);
    justify-self: center;
    margin: 0;
    padding: 14px 18px;
  }

  #startScreen #authPanel .portal-tabs { margin-bottom: 10px; }

  #startScreen #authPanel .auth-form { gap: 6px; }

  #startScreen #authPanel .auth-form label { margin-top: 2px; font-size: 12px; }

  #startScreen #authPanel .auth-form input { min-height: 46px; padding: 8px 12px; }

  #startScreen #authPanel .portal-primary { margin-top: 8px; padding: 11px 14px; }

  #startScreen #authPanel .portal-message { min-height: 16px; margin-top: 6px; font-size: 12px; }

  #startScreen .lobby-card {
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
    max-height: none;
    overflow: visible;
  }

  /* Notícias são conteúdo secundário: encurta para os botões do herói
   * ficarem acima da dobra, sem depender de rolagem. */
  #startScreen .world-news-panel { max-height: 170px; }

  #startScreen .start-foot {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0;
    font-size: 10px;
  }

  /* Boas-vindas: compacto para caber na altura curta sem corte. */
  .welcome-modal { max-height: calc(100vh - 20px); overflow: auto; }
  .welcome-header { padding: 12px 16px 4px; }
  .welcome-header h2 { font-size: 20px; }
  .welcome-body { padding: 10px 18px 12px; }
  .welcome-intro { font-size: 12px; margin-bottom: 10px; }
  .welcome-features { gap: 8px; }
  .wf-icon { font-size: 20px; margin-bottom: 2px; }
  .welcome-footer { padding: 4px 14px 14px; }
  .welcome-footer button { padding: 10px 34px; font-size: 15px; }
}

/* Deitado: painéis viram modais flutuantes CENTRALIZADOS — não folhas de borda a borda. */
@media (orientation: landscape) and (max-height: 500px) {
  .panel { left:50% !important; right:auto !important; top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) !important; width:min(92vw,640px) !important; max-width:none !important; max-height:min(84vh, calc(100vh - 48px)) !important; border-radius:14px !important; border-left:1px solid var(--gold-dk) !important; border-right:1px solid var(--gold-dk) !important; border-bottom:1px solid var(--gold-dk) !important; padding-bottom:16px !important; }
}